Bootstrap-datepicker не обновляет модель AngularJS при выборе даты
Я использую AngularJS с этот плагин bootstrap-datepicker:
Datepicker для Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
Copyright 2012 Stefan Petre
Усовершенствования Andrew Rowls
Я связал это так:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
Я получаю значения на входы с помощью ng-model
.
Когда я ввожу дату в это поле с помощью клавиатуры, все работает нормально, но когда я нажимаю на поле и выбираю дату из Datepicker:
- модель не обновляется,
- поле не рассматривается как грязное (класс
ng-dirty
).
Есть ли способ сообщить Angular обновить значение obj.FirstDate
при использовании Datepicker? Например, чтобы прикрепить его к событию? Или каким-либо другим способом это будет работать?
У меня есть несколько таких полей, поэтому я не хочу писать script, который прикрепляется к полю, используя его id
. Любая помощь была оценена.
Ответы
Ответ 1
После долгих попыток борьбы с этим я был вынужден использовать нижеприведенный код, чтобы исправить каждый из моих экземпляров datepicker сразу:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
angular.element($(this)).triggerHandler('input');
});
});
}
И запустите его из angular.controller
.
На основе этого ответа: fooobar.com/questions/44107/....
Ответ 2
Не зная больше, я думаю:
... если вы измените любую модель вне контекста Angular, тогда вы необходимо сообщить Angular об изменениях, вызвав $apply() вручную. Это как сказать Angular, что вы меняете некоторые модели, и это должен стрелять наблюдателей, чтобы ваши изменения распространялись правильно.
Источник: https://www.sitepoint.com/understanding-angulars-apply-digest/
Вот директива для этого конкретного datepicker: https://github.com/fkammer/ng-eternicode-datepicker