Question

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

我做错了什么？有没有办法使用输入input来做到这一点？我看到了一个$valid的答案，其中包含了向input和form添加名称的建议 - 但如果我需要验证多个input，我该怎么办？不只是一个？

inputs

这是我的一个输入＆＃39;在html中：

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

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

Answer 2

我认为这会为你做到： https://stackoverflow.com/a/23871934/1636157

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        require: '^form',
        link: function (scope, inputElement, attrs, ctrl) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);

            scope.$watch(ctrl.$name + '.' + inputElement.attr('name') + '.$valid', function (valid) {
               if(valid) {
                  inputElement.prev().addClass('fa-check green-i');
               } else {
                  inputElement.prev().removeClass('fa-check green-i');
               }
            }); 
        }
    };
});

监视AngularJS指令中输入元素的$ valid

2 个答案: