如何在事件上对jquery上的ng模型进行指令更新

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

本文关键字：模型 ng 更新 指令 上的 jquery 事件      更新时间：2023-09-26

我正在为jQuery日期选择器插件编写AngularJS指令，该插件应在日期选择器日期更改时更新ng模型。

这是迄今为止的代码：

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？

谢谢！

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

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

对于日期选择器的udpating模型，您需要在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中（模型中的值，控件绑定到该值）。

工作Plunkr

如果你还需要什么，请告诉我，我会给你详细信息，谢谢。

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

相关文章：