AngularJS 指令监视有效性

Question

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

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

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

现在我希望 invalid-add-class 指令在模型无效时添加类“错误”，并在模型有效时将其删除。换句话说，它应该监视模型控制器的 $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 属性而不强制将其绑定到单个特定的表单和输入名称？

只需使用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：这篇文章之前被我的一个错觉挂断了，专注于实现问题的错误原因。我的错。上面的例子消除了这种固定。此外，还添加了小提琴，表明这种方法确实有效，并且总是有效，一旦您在手表表达式周围添加引号。