Datepicker no actualiza ng-model

Entonces, he creado un selector de fecha muy simple:

HTML:

<div ng-controller="DatepickerCtrl">

<div style="display:inline-block; min-height:290px;">
    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" ng-model="dt">    </datepicker>
</div>

<p>Date: {{dt}}.</p>

JavaScript:

angular.module('services', ['ui.bootstrap']);
angular.module('services').controller('DatepickerCtrl', function ($scope) {
$scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
});

El selector de fecha se carga correctamente, pero el modelo ng no se actualiza y el párrafo al final del marcado muestra un valor en blanco para "dt".

Vi algunos problemas similares publicados en GitHub (https://github.com/angular-ui/bootstrap/issues/808, https://github.com/angular-ui/bootstrap/issues/784) pero ninguna de las soluciones allí resolvió el problema.

¿Alguna idea?

preguntado Oct 07 '14, 14:10

3 Respuestas

Siempre sospecho cuando veo que ng-model hace referencia a algo sin un punto (.) en el nombre. Si el código de su controlador tiene $ scope.dt, cámbielo a:

$scope.form = {};
$scope.form.dt = null;

Luego, en su html, cambie las referencias de "dt" a "form.dt". Como dice Misko, si tienes un modelo ng sin un punto, lo estás haciendo mal.

La mejor de las suertes,

alemán

Respondido 07 Oct 14, 16:10

¡Gracias por el consejo! Soy nuevo en AngularJS, así que lo tendré en cuenta para futuras referencias. Dicho esto, no parece resolver el problema aquí :( - Taj

Me encontré con un problema similar antes! Estas cosas siempre me vuelven loco. En Angular, la forma en que funciona el enlace de datos y cómo se actualizan las vistas no está muy bien documentada. Pero una cosa que aprendí es que cada vez que intenta actualizar la vista usando algo que no es compatible con Angular, desea $ver la variable cuyo valor está cambiando para que cada vez que cambie el valor, Angular llamará a $digest() que ejecuta los cambios y actualiza la vista.

Puedes leer más sobre $watch aquí: https://docs.angularjs.org/api/ng/type/$rootScope.Alcance

Así que volviendo a tu caso:

Pruebe $watch() en la variable que cambiará (alternativamente, puede usar $watchGroup para múltiples variables cambiantes). Por ejemplo: 

$scope.$watch('minDate'), function(newVal, oldVal, scope){
    if(newVal != oldVal){
        scope.minDate = newVal;
    }
}

¡Espero que esto ayude!

Respondido 07 Oct 14, 16:10

Lo intenté y no pareció tener ningún efecto. Lo que es realmente extraño es: el ng-model="dt" parece funcionar y actualizarse en otros elementos. Por ejemplo, si uso el campo de entrada de fecha de ejemplo proporcionado: Puedo ver el valor de esa actualización de campo cuando actualizo el selector de fechas. Pero no mostrará la fecha en el etiqueta en el ejemplo. - Taj

¡Bueno, eso es porque dt no está definido en su servicio ni en su controlador! Intente crear una 'fecha' variable en su servicio y actualice la variable cuando el usuario cambie la fecha. Luego, reemplace {{dt}} con {{date}} asegurándose de que su servicio se inyecte correctamente en su controlador y también se defina correctamente allí. Para ayudarlo mejor, cree un plunkr :) - justinSYDE

Dios mío, bueno, esto es extraño... Parece que funciona en Plunkr... plnkr.co/edit/oMLRpy6xaGxgAHpxKCEI?p=preview ...No tengo ni idea de porqué... - Taj

Intenta usar ese código, siempre uso [(ngModel)]:

    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" [(ngModel)]="dt">    </datepicker>

Respondido 10 ago 20, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.