javascript - AngularJS:更改验证时的innerHTMLl

Question

我要改innerHTML元素的数量取决于验证测试的结果。作为angular.js的新手，我不确定如何实现这一目标。我尝试添加自定义 directive ，但它不起作用。我想对特定元素的所有验证测试使用react。也许，这里有人可以告诉我最好的方法。

这是我的(不起作用)代码:

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

.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 .

也许有人可以帮我在 <span> 中放置一个图标元素为innerHTML ？

Answer 1

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

例如，它可以是这样的:

angular.module('demo', ['ngMessages']).controller('mainController', function($scope) {
    $scope.submit = function() {};
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>

<div class="container" ng-app="demo" ng-controller="mainController">
    <form novalidate="" name="regForm" ng-submit="submit()">
        <div class="form-group">
            <div class="form-group margin-bottom-sm">
                <input type="text" class="form-control" placeholder="Username" name="userName" ng-model="userName" ng-minlength="5" required="" autofocus="" />
                <div ng-messages="regForm.userName.$error" role="alert">
                    <div ng-message="required, minlength">
                        <i class="fa fa-times-circle fa-lg" style="color:red"></i> Username must be at least 5 chars long
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>