我正在为jQuery日期选择器插件创建AngularJS指令,当日期选择器日期更改时,该插件应更新ng-model。
这是到目前为止的代码:
angular.module('bootstrap-timepicker', []).directive('timepicker', [ function() { var link; link = function(scope, element, attr, ngModel) { element.datetimepicker(); element.on('dp.change', function(event) { // update ngModel ? }); }; return { restrict: 'A', link: link, require: 'ngModel' }; } ]);
考虑到在调用事件时范围,元素,属性,ngModel不可用,如何在“ dp.change”事件中更新ngModel?
谢谢!
可以肯定的是,已添加到angular的任何插件都不会更新ng-modelangular范围的,我们需要在它的jquery change事件上手动进行操作。在有角度的jquery中,插件应始终使用指令绑定到DOM,因为指令确实提供了对DOM的良好控制。
ng-model
正如您在问题中所问的那样ngModel,,element和scope对象在dp.change事件内不可用datetimepicker,我不认为这在指令链接函数内是可能的,您一定做了其他事情,或者您错过了问题的解释。
ngModel
element
scope
dp.change
datetimepicker
为了更新日期选择器的ng-model,您需要在dp.change事件中添加以下代码
element.on('dp.change', function(event) { //need to run digest cycle for applying bindings scope.$apply(function() { ngModel.$setViewValue(event.date); }); });
在上面的代码中,我们从事件对象中检索了更新的日期,然后将其分配给的$viewValue( 视图中的实际字符串值 )ng-model,然后为了将其更新到ng-model使用该变量的每个其他位置,我们需要使用$apply()on指令手动运行摘要循环链接功能范围。运行摘要循环的原因是,我们需要将该值推送到ng-model变量$modalValue(控件绑定到模型中的值 )中。
$viewValue
$apply()
$modalValue