Question

我尝试创建一个指令，当输入字段被标记为无效时，该指令应该执行某些操作。对于这个例子，我假设我有一个指令来检查输入是否是素数，并且我想创建一个指令，当该元素无效时，该指令会向该元素添加一个类：

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error">

validate-prime使用ng-model上的解析器和格式化程序来更新模型的有效性。

现在我希望invalid-add-class指令在模型无效时添加类“error”，并在有效时删除它。换句话说，它应该观察模型控制器的$ valid（或$ invalid）属性。但是，我无法弄清楚如何使这个工作。我试过了：

link : function(scope, element, attrs, ctrl) {
    ctrl.$watch("$valid", function(newVal, oldVal) {
    //never fired
    });
}

也许我可以在范围内观察一些变量，但我不知道要注意哪个变量。

那么当模型的有效性发生变化时，如何通知我？

Answer 1

如果您有<form>，请为其添加name（假设为'myForm'），并为您的输入添加name（假设为myInput）。你应该能够$watch通过：

scope.$watch('myForm.myInput.$valid', function(validity) {})

如果您没有form，则可以随时观看某项功能。这样：

scope.$watch(function() { return ctrl.$valid; }, function(validity){});

您可以详细了解表单方法here。

Answer 2

如果您没有<form />，可以轻松获得一个：

在你的指令定义中：

require: '^form'

然后在你的链接函数中，表单作为第四个参数传递：

    link: function (scope, element, attr, ctrl) {

现在您不必硬编码表单或输入字段来执行$ watch：

 scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
 function (validity) {});

Answer 3

我们的目标通常应该是使指令独立于任何一种形式或输入而工作。我们怎样才能让它读取本地$valid属性而不必将其强制绑定到单个特定形式＆amp;输入名称？

只需使用require: 'ngModel'作为指令配置的属性之一。这将注入本地ngModel控制器作为链接函数的第四个参数，您可以将$watch直接放在$valid上，而无需将指令的实现耦合到任何特定的形式或输入。

require: 'ngModel',
link: function postLink(scope, element, attrs, controller) {
    scope.inputCtrl = controller;
    scope.$watch('inputCtrl.$valid', handlerFunc)
}

处理程序应始终触发对该结构的$ valid更改。请参阅this Fiddle，其中输入已针对美国邮政编码或Zip + 4的模式进行验证。每当有效性发生变化时，您都会收到警报。

编辑3/21/14：这篇帖子以前挂了我的妄想，注意到实施问题的错误原因。我的错。上面的例子删除了固定。此外，添加小提琴，表明这种方法确实有效，并且一旦你在监视表达式周围添加引号，它总是这样做。

AngularJS指令监视有效性

3 个答案: