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

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

这是肯定的,任何添加到角度的插件都不会更新ng-model角度范围,我们需要在它的jquery更改事件上手动执行.在角度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(视图中的实际字符串值)ng-model,之后为了更新到每个ng-model使用此变量的地方,我们需要使用$apply()on指令手动运行摘要周期链接功能范围.我们运行摘要周期背后的原因是,我们需要将该值推入ng-model变量$modalValue(模型中的值,控件绑定到的值).

工作Plunkr

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