30

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

<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
    });
}

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

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

4

3 回答 3

63

如果您有 a <form>，请将 a 添加name到它（假设为 'myForm'）和 aname到您的输入（假设myInput）。您应该可以通过以下方式做到$watch这一点：

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

如果您没有form，您可以随时观看功能。这边走：

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

您可以在此处阅读有关表单方法的更多信息。

于 2013-04-09T13:14:21.107 回答
12

如果你没有，<form />你可以很容易地得到一个：

在您的指令定义中：

require: '^form'

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

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

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

 scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
 function (validity) {});
于 2014-05-26T14:02:49.810 回答
7

一般来说，我们的目标应该是使指令独立于任何一种形式或输入而工作。我们如何允许它读取本地$valid属性而不强制将其绑定到单个特定表单和输入名称？

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

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

处理程序应始终触发具有该结构的 $valid 更改。请参阅此 Fiddle，其中验证输入是否符合美国邮政编码或 Zip+4 的模式。每次有效性更改时，您都会收到警报。

编辑 3/21/14：这篇文章之前被我的一个错觉挂断了，专注于实现问题的错误原因。我的错。上面的例子消除了这种固定。此外，添加了小提琴，表明这种方法确实有效，并且总是有效，一旦您在手表表达式周围添加引号。

于 2014-01-28T02:19:53.407 回答