如何在 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 的任何插件都不会更新 angular 范围的 ng-model 是肯定的，我们需要在它的 jquery 改变事件。在 angular jquery 中，插件应该始终绑定到 DOM using 指令，因为指令确实提供了对 DOM.

的良好控制

正如您在 ngModel、element 和 scope 对象在 datetimepicker 的 dp.change 事件中不可用的问题中所问，我不知道'认为这在指令 link 函数中是可能的，你一定做了其他事情，或者你错过了在问题中解释。

要更新日期选择器的 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);
  });
});

在上面的代码中，我们从事件对象中检索更新日期，然后分配给 ng-model 的 $viewValue（视图中的实际字符串值），此后，为了将其更新到使用此 ng-model 变量的任何其他地方，我们需要使用指令 link 函数范围上的 $apply() 手动运行摘要循环。我们运行摘要循环背后的原因是，我们需要将该值推入 ng-model 变量 $modalValue( 模型中的值，控件已绑定至).

Working Plunkr

如果您需要更多信息，请告诉我，我会为您提供详细信息，谢谢。

Answer 2

看看这个demohttp://jsfiddle.net/TheRodeo/taujuuq2/3/ 这可能会让您了解如何进行

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

How to make a directive update ng-model on jquery on event?

javascript

jquery

angularjs

angularjs-directive

datetimepicker