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

【问题标题】：How to make a directive update ng-model on jquery on event?如何在事件中对 jquery 进行指令更新 ng-model？
【发布时间】：2015-03-02 11:18:34
【问题描述】：

我正在为一个 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？

谢谢！

【问题讨论】：

为什么不使用 Angular 日期选择器？
谢谢，但我想为我的应用程序使用特定日期选择器的非常特定版本。
你有没有机会创建一个 plunker/fiddle 来复制这个问题？
也许这是一个愚蠢的问题，但是为什么你说这些变量在事件被调用的时候不可用呢？既然它们是外部函数的一部分，你能不能只是取消引用它们？

标签： javascript jquery angularjs angularjs-directive datetimepicker

【解决方案1】：

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

正如您在问题中所问的那样，datetimepicker 的 dp.change 事件中不提供 ngModel、element 和 scope 对象，我认为这在指令链接中是不可能的功能，你一定是做了其他事情，或者你错过了在问题中解释。

为了更新日期选择器的 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 变量，我们都需要在指令链接函数范围内使用$apply() 手动运行摘要循环。我们运行摘要循环背后的原因是，我们需要将该值推入ng-model 变量$modalValue（模型中的值，控件绑定到）。

Working Plunkr

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

【讨论】：

【解决方案2】：

看看这个demohttp://jsfiddle.net/TheRodeo/taujuuq2/3/ 这可能会让你知道如何进行

【讨论】：