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

IT技术 javascript jquery angularjs angularjs-directive datetimepicker
2021-02-11 03:39:39

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

谢谢！

2个回答

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

正如您在问题中所问的那样ngModel，element, 和scopeobject 在 的dp.changeevent中不可用datetimepicker，我认为这在指令链接函数中永远不可能，您一定是做了其他事情，或者您错过了在问题中的解释。

对于更新日期选择器的 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);
  });
});

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

工作Plunkr

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

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

其它你可能感兴趣的问题
上一篇类型错误：无法读取未定义的属性“setState” 下一篇Javascript SetTimeout 和循环