Javascript AngularJS:在验证时更改innerHTMLl

我想根据验证测试的结果更改元素的

innerHTML

。作为

angular.js

的新手，我不知道如何做到这一点。我试图添加自定义

指令

，但它不起作用。我想对特定元素的所有验证测试做出反应。也许，这里有人能告诉我最好的方法

这是我的（不工作）代码：

.js

loginApp.directive('iconValidator', function() {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.iconValidator = function (modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    scope.iconHtml='';
                    return true;
                }
                if (ctrl.$touched && ctrl.$invalid {
                    debuger
                    scope.iconHtml='<i class="fa fa-times-circle fa-lg" style="color:red"></i>';
                    return false;
                }

                scope.iconHtml='';
                return true;
            };
        }
    };
});

loginApp.directive（'iconValidator'，function（）{
返回{
要求：'ngModel'，
链接：函数（范围、elm、属性、ctrl）{
ctrl.$validators.iconValidator=函数（modelValue，viewValue）{
如果（ctrl.$isEmpty（modelValue））{
scope.iconHtml=''；
返回true；
}
如果（ctrl.$toucted&&ctrl.$invalid{
调试器
scope.iconHtml=''；
返回false；
}
scope.iconHtml=''；
返回true；
};
}
};
});

.html

<div class="col-md-6">
    <div class="signup-form">
        <h2>New User Signup!</h2>
        <form action="#" novalidate method="post" name="regForm" ng-submit="submit()">
            <div class="input-group margin-bottom-sm">
                <input type="text" class="form-control" placeholder="Username" iconValidator ng-model="userName" required autofocus/>
                <span class="input-group-addon" ng-bind-html="iconHtml"></span>
            </div>
        </form>
    </div>
</div>

新用户注册！

此外，我还包括模块

ngSanitize

---

也许有人可以帮我在

元素中放置一个图标，作为

innerHTML

？

我认为更好的方法是使用指令来处理验证错误消息

例如，它可以是这样的：

angular.module（'demo'，['ngMessages']）.controller（'mainController'，function（$scope）{
$scope.submit=function（）{}；
})；

用户名长度必须至少为5个字符

我认为更好的方法是使用指令来处理验证错误消息

例如，它可以是这样的：

angular.module（'demo'，['ngMessages']）.controller（'mainController'，function（$scope）{
$scope.submit=function（）{}；
})；

用户名长度必须至少为5个字符

好的， 我使用html制作了解决方案：

<i ng-if="regForm.userName.$touched"
   ng-class="{'fa fa-lg fa-times-circle': regForm.userName.$invalid, 'fa fa-lg fa-check-circle':regForm.userName.$valid}"
   ng-style="regForm.userName.$invalid ?{color: 'red'}: {color: 'green'}"/>

我想问一下，有没有可能对这样的html进行清理，因为同一个逻辑将有几个组件，我不想复制过去。

好的， 我使用html制作了解决方案：

<i ng-if="regForm.userName.$touched"
   ng-class="{'fa fa-lg fa-times-circle': regForm.userName.$invalid, 'fa fa-lg fa-check-circle':regForm.userName.$valid}"
   ng-style="regForm.userName.$invalid ?{color: 'red'}: {color: 'green'}"/>

---

我想问，有没有可能清理这些html，因为同一个逻辑将有几个组件，我不想复制过去。

为什么不使用ngIf或ngShow？我知道，那么我必须用html编写所有代码，我不想这样。我只想在需要时添加代码。@Edgar so AngularJS对你来说是完全错误的。它涉及到编写g在HTML中的条件，这就是它的工作方式。如果没有

ng if

和

ng show

AngularJS是完全没有意义的。为什么不使用ngIf或ngShow？正如我所知，那么我将不得不用HTML编写所有代码，我不想这样。我只想在需要时添加代码。@Edgar so AngularJS对你来说是完全错误的。它涉及到编写co如果没有

ng if

和

ng show

AngularJS，它完全没有意义。