javascript - example - ng bootstrap
bootstrap-datepicker no actualiza el modelo AngularJS al elegir la fecha (2)
Estoy usando AngularJS con este complemento bootstrap-datepicker :
Datepicker para Bootstrap v1.6.4 ( https://github.com/eternicode/bootstrap-datepicker )
Copyright 2012 Stefan Petre
Mejoras de Andrew Rowls
Lo tengo atado así:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
Obtengo los valores en las entradas usando ng-model
.
Cuando escribo la fecha en este campo con el teclado todo funciona bien, pero cuando hago clic en un campo y selecciono una fecha en el Marcador de fecha:
- el modelo no se actualiza,
- el campo no se trata como sucio (sin clase
ng-dirty
).
¿Hay alguna manera de decirle a Angular que actualice el valor de obj.FirstDate
cuando usa el Datepicker? Por ejemplo, para adjuntarlo a un evento? O de otra manera que esto funcionaría?
Tengo algunos de estos campos, así que no quiero escribir el script que se adjunta a un campo usando su id
. Cualquier ayuda apreciada.
Sin saber más, mi mejor conjetura es:
... si cambia cualquier modelo fuera del contexto angular, entonces necesita informar a Angular de los cambios llamando $ apply () manualmente. Es como decirle a Angular que está cambiando algunos modelos y que debería despedir a los observadores para que sus cambios se propaguen correctamente.
Fuente: https://www.sitepoint.com/understanding-angulars-apply-digest/
Aquí hay una directiva para este datepicker específico: https://github.com/fkammer/ng-eternicode-datepicker
Después de mucho tiempo de luchar con esto, me vi obligado a utilizar el código siguiente para corregir cada una de las instancias de mi datepicker a la vez:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$(''[data-provide="datepicker"]'').datepicker().on(''changeDate'', function (e) {
angular.element($(this)).triggerHandler(''input'');
});
});
}
Y ejecutarlo desde dentro del angular.controller
.
Basado en esta respuesta: https://.com/a/23850753/1813219 .