如何在事件上对jquery进行指令更新ng-model?
我正在为一个jQuery日期选择器插件制作一个AngularJS指令,它应该在datepicker日期发生变化时更新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' }; } ]);
考虑到在调用事件时scope,element,attr,ngModel不可用,如何在’dp.change’事件中更新ngModel?
谢谢!
这是肯定的,任何添加到角度的插件都不会更新角度范围的ng-model
,我们需要在它的jquery更改事件上手动执行。 在角度jquery插件中应始终使用指令绑定到DOM,因为指令确实提供了对DOM的良好控制。
正如您在问题中提到的ngModel
,在datetimepicker
dp.change
事件中, ngModel
, element
和scope
对象不可用,我不认为这可能在指令链接函数中是可能的,你必须做过其他事情或者你错过了在问题中解释。
对于udpating ng-model of date picker,您需要在dp.change
事件中添加以下代码
element.on('dp.change', function(event) { //need to run digest cycle for applying bindings scope.$apply(function() { ngModel.$setViewValue(event.date); }); });
在上面的代码中,我们从事件对象中检索更新的日期,然后分配给ng-model
的$viewValue
( 视图中的实际字符串值 ),然后为了更新到每个使用此ng-model
变量的地方,我们需要在指令链接函数作用域上使用$apply()
手动运行摘要循环。 我们运行摘要周期背后的原因是,我们需要将该值推入ng-model
变量$modalValue
( 模型中的值,控件绑定的值 )。
工作Plunkr
如果您需要更多信息,请告诉我,我会告诉您详细信息,谢谢。