如何在事件上对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（控件绑定到模型中的值）中。