小编典典

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

javascript

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

谢谢!


阅读 346

收藏
2020-05-01

共1个答案

小编典典

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

正如您在问题中所问的那样ngModel,,elementscope对象在dp.change事件内不可用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控件绑定到模型中的值 )中。

2020-05-01