Question

我有一个名为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

但输出与上例相同。

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

Answer 1

解决此问题的一种方法是在其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

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

1 个答案: