javascript - 从指令设置表单元素的属性

Question

我正在制作一个 Angular 注册表单，并制定了检查有效电子邮件的指令。该指令使用Validator的isEmail(str [, options])为我做检查正则表达式的工作。

该指令名为 validator :

<form name="signUpForm">
    <div class="form-group" ng-class="{ 'has-error' : signUpForm.email.$invalid && !signUpForm.email.$pristine }">
        <input type="email" name="email" validator="isEmail" placeholder="Email" class="form-control" ng-model="user.email" ng-minlength="3" ng-maxlength="8">
        <p ng-show="signUpForm.email.$invalid && !signUpForm.email.$pristine" class="help-block">E-mail is required.</p>
        <p ng-show="signUpForm.email.$invalid">E-mail is invalid.</p>
    </div>
    <button ng-click="signUp()" class="btn btn-primary" ng-disabled="signUpForm.$invalid">Sign Up</button>
</form>

Angular:我想以某种方式返回 false ，或设置$invalid如果电子邮件无效，则为 true，并显示“电子邮件无效”消息 ( <p ng-show="signUpForm.email.$invalid">E-mail is invalid.</p> )。我不知道如何设置 $invalid但指令的属性:

angular
    .module('v2v')
    .directive('validator', ['$rootScope', function ($rootScope) {
        return {
            restrict: 'A',
            link: function (scope, elem, attr) {
                elem.bind("keydown keypress", function(event) {
                    elem.$invalid = validator.isEmail(this.value);
                });
            }
        };
}]);

Answer 1

Angular 输入已内置 email验证，但如果您需要添加自己的自定义验证，您可以通过将自己的验证函数添加到模型 Controller $validators 来轻松完成此操作:

angular
    .module('v2v')
    .directive('validator', ['$rootScope', function ($rootScope) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, modelController) {
              modelController.$validators.email = function () {
                return validator.isEmail(this.value);
              }
            }
        };
}]);

也无需滚动自己的通知元素，您可以使用 Angular 的 ng-messages为您做这件事的指令:

<div ng-messages="signUpForm.email.$error">
  <div ng-message="required">Email is required</div>
  <div ng-message="email">E-mail is invalid.</div>
</div>