如何在事件上对 jquery 进行指令更新 ng-model? [英] How to make a directive update ng-model on jquery on event?

问题描述

我正在为 jQuery 日期选择器插件制作一个 AngularJS 指令，当日期选择器日期改变时，它应该更新一个 ng-model.

I'm making an AngularJS directive for a jQuery date picker plugin which should update a ng-model when the datepicker date has changed.

这是目前的代码:

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?

How can I update ngModel in the 'dp.change' event considering that scope, element, attr, ngModel are not available when the event is called?

谢谢！

推荐答案

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

This is sure thing that any plugin which has been added to angular doesn't update the ng-model of angular scope, we need to manually do it on it's jquery change event. In angular jquery plugin should always binded to DOM using directive, because directive does provide good control over a DOM.

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

As you asked in your question that ngModel, element, and scope object are not available inside dp.change event of datetimepicker, I don't think so this could be ever possible inside directive link function, you must have been did something else or you missed to explain in the question.

为了更新日期选择器的 ng-model，您需要在 dp.change 事件中添加以下代码

And for udpating ng-model of date picker you need add below code on your dp.change event

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

在上面的代码中，我们从事件对象中检索更新日期，然后分配给ng-model<的$viewValue(视图中的实际字符串值)/code>，此后为了将其更新到使用此 ng-model 变量的所有其他地方，我们需要在指令上使用 $apply() 手动运行摘要循环链接功能范围.我们运行摘要循环背后的原因是，我们需要将该值推送到 ng-model 变量 $modalValue(模型中的值，即控件绑定到).

In above code we retrieved updated date from event object, then assigned to the $viewValue(Actual string value in the view) of ng-model, thereafter in order update that to every where else wherever this ng-model variable has been used we need to run digest cycle manually using $apply() on directive link function scope. The reason behind the we ran the digest cycle is, we need to push that value inside ng-model variable $modalValue(The value in the model, that the control is bound to).

工作 Plunkr

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

Let me know if you required anything more, I'll get you that detail, Thanks.

这篇关于如何在事件上对 jquery 进行指令更新 ng-model?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！