如何在自定义指令中包装 ng-change

How to wrap ng-change in custom directive?

本文关键字：包装 ng-change 指令 自定义      更新时间：2023-09-26

我有一个简单的指令叫做input-text，它基本上包装了一个输入控件。

赋予input-text属性的值将传递给ng-model并且工作正常。现在我还想传递一个函数，该函数通过传递给名为 input-change 的属性来调用模型的任何更改。

angular.module('test').directive('inputText', function() {
  return {
    restrict : 'A',
    scope : {
      inputText : '='
    },
    template : '<input ng-model="inputText" />',
    link : function(scope, element, attr) {
      var model = element.find('input').controller('ngModel');
      model.$viewChangeListeners.push(function() {
        scope.$parent.$eval(attr.inputChange);
      });
    }
  }
});

有关更多详细信息，请参阅 http://plnkr.co/edit/qC7FlxVNKH4SrAhLoJy4。

每次我在控件中键入时都会调用传递给指令的函数，但我在控制台中记录的值不是控件的当前$viewValue（而是前一个）。

我还尝试了一种不同的方法，将给定input-change的字符串传递给输入控件上的ng-change，如下所示：

angular.module('test').directive('inputText', function() {
  return {
    restrict : 'A',
    scope : {
      inputText : '=',
      inputChange : '&'
    },
    template : '<input ng-model="inputText" ng-change="inputChange()" />',
  }
});

http://plnkr.co/edit/SutAFnCgo10QNmvBFsDs

但输出与上面的示例相同。

有人可以解释这种行为或告诉这里出了什么问题吗？

解决此问题的一种方法是在其input-change绑定上显式公开输入值。为此，您可以使用此模板：

<input ng-model="inputText" ng-change="inputChange({value: inputText})" />

然后使用内部作用域中的value变量，而不是外部作用域中的test.model.name变量：input-change="test.callback(value)"

http://plnkr.co/edit/SNatIAkPIHFSMooMWWFS?p=preview

第二种选择是使用 scope.$watch 监视更改，并且仅在触发时触发函数：

link: function(scope) {
  scope.$watch('inputText', function(n) {
    scope.inputChange();
  });
}

http://plnkr.co/edit/Vrwe3SC3ejMG4aFIwBTU?p=preview

相关文章：