javascript - 监控 AngularJS 指令中输入元素的 $valid

Question

我有这个指令在 <i> 之前每个 <input> 之前的元素带有 add-icon-element 的元素属性。现在我要做的是观察每个 <input> 的验证元素，因此当用户在其中一个中键入内容时，<i> 的类前面的元素将更改为 fa-check green-i .我尝试使用 attrs.$observe 来做到这一点查看类何时从 ng-invalid 更改至 ng-valid但它只在 DOM 结构化时触发一次，它不会对 input 中的更改使用react元素。

我做错了什么？有没有办法使用输入 $valid 来做到这一点？我看到了一些关于一个 input 的答案建议将名称添加到 form和 input - 但如果我有多个 inputs 我该怎么办？我需要验证而不仅仅是一个？

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        link: function (scope, inputElement, attrs) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);
            attrs.$observe('class', function(val){
                if (val.indexOf("ng-valid") >= 0) {
                    inputElement.prev().addClass('fa-check green-i');
                }
            });
        }
    };
});

这是我在 html 中的“输入”之一:

<form role="form" name="createProjectForm" class="form-validation">
    <div class="form-group">
        <label class="control-label text-center center-block" for="project.name">
                Name Your Project
        </label>
        <div class="input-icon right">
            <input type="text" placeholder="type here" name="project.name"
                ng-model="project.name" required="required" class="form-control" add-icon-element/>
        </div>
    </div>
<form>

Answer 1

您不需要为这种情况创建指令，您可以通过使用 ng-class 指令来实现，只需将您的字段名称从 name="project.name" 到 name="project_name"

<div class="input-icon right">
    <input type="text" placeholder="type here" name="project.name" 
       ng-class="{'fa-check green-i': createProjectForm.project_name.$valid}"
       ng-model="project.name" required="required" 
       class="form-control"/>
</div>

更新

要使其成为通用方式，您需要在该元素上require ngModel 指令，这将使您能够访问ngModelController。

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        require: 'ngModel', //require to get access to `ngModelController`
        link: function (scope, inputElement, attrs, ngModelCtrl) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);
            scope.$watch(function(){
               return ngModelCtrl.$valid; //made watch on field validation.
            }, function(val){
                if (val.indexOf("ng-valid") >= 0) {
                    inputElement.prev().addClass('fa-check green-i');
                }
            });
        }
    };
});