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

Question

我正在制作一个有角度的注册表单，并已指示检查有效的电子邮件。该指令使用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 验证，但如果您需要添加自己的自定义验证，您可以通过将自己的验证函数添加到模型控制器 $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>