如何在事件上对jquery进行指令更新ng-model？

Question

我正在为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？谢谢！

Answer 1

可以肯定的是，已添加到angular的任何插件都不会更新ng-modelangular范围的，我们需要在它的jquery change事件上手动进行操作。在有角度的jquery中，插件应始终使用指令绑定到DOM，因为指令确实提供了对DOM的良好控制。

正如您在问题中所问的那样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（控件绑定到模型中的值）中。