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