Question

我正在为一个jQuery日期选择器插件制作一个AngularJS指令，该插件应该在datepicker日期发生变化时更新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'
    };
  }
]);

如果在调用事件时scope，element，attr，ngModel不可用，我如何在'dp.change'事件中更新ngModel？

谢谢！

Answer 1

这肯定是任何添加到angular的插件都不会更新角度范围的ng-model，我们需要在它的jquery change事件上手动执行。在角度jquery插件中，应始终使用指令绑定到DOM，因为指令确实可以很好地控制DOM。

正如您在问题中提到ngModel，element和scope对象在dp.change datetimepicker事件中未提供时，我不这样做我认为这可能在指令链接功能中是可能的，你必须做了别的事情或者你错过了在问题中解释。

对于udpating ng-model of date picker，您需要在dp.change事件中添加以下代码

element.on('dp.change', function(event) {
  //need to run digest cycle for applying bindings
  scope.$apply(function() {
    ngModel.$setViewValue(event.date);
  });
});

在上面的代码中，我们从事件对象中检索更新的日期，然后分配给$viewValue的{{1}}（视图中的实际字符串值），之后按顺序更新对于使用此ng-model变量的任何其他地方，我们需要在指令链接函数作用域上使用ng-model手动运行摘要循环。我们运行摘要周期背后的原因是，我们需要将该值推到$apply()变量ng-model内（模型中的值，控件绑定到）

Working Plunkr

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

Answer 2

查看demo http://jsfiddle.net/TheRodeo/taujuuq2/3/ 这可能会让你知道如何继续

如何在jquery事件上创建指令更新ng-model？

2 个答案: