Given the demo below:
http://jsfiddle.net/ADukg/8851/
I want every time the date changes for my controller value to update. So every time a new date is selected from the box below the value for ng-model changes.
However upon using the following directive I get the error written above.
app.directive('datetimepicker', function () {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
onRender:function (date) {
// Triggers a digest to update your model
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
}
}
});
How can I detect changes in Angular for the Datetimepicker?
Bootstrap's datetimepicker
plugin doesn't support the change
event in the options of the constructor, but you can use the dp.change
event of the element you just added the datetimepicker
to:
element.datetimepicker({});
element.on('dp.change', function(event) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(event.date.format());
});
})
Here is the update to your jsfiddle:
http://jsfiddle.net/dekelb/fc9kuy3x/3/