Question

我有一个带有两个指令（属性）的输入元素。如果输入无效，则会添加错误类。

<input required alpha type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />

这些是我的指示

// SHOWS AN ERROR IF THE INPUT IS EMPTY
directives.required = function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.on('keyup', function(event) {
                if(elem.val().trim() == '') {
                    elem.prop('title', 'This input is required!');
                    elem.addClass('error');
                } else {
                    elem.prop('title', '');
                    elem.removeClass('error');
                }
            })
        }
    }   
};

// SHOWS AN ERROR IF THE INPUT CONTAINS NON ALPHA CHARACTERS
directives.alpha = function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var regexp = /^[A-Za-z ñÑ]+$/;
            var char;
            elem.on('keyup', function(event) {
                if(!regexp.test(elem.val())) {
                    elem.prop('title', 'This input can contain letters only!');
                    elem.addClass('error');
                } else {
                    elem.prop('title', '');
                    elem.removeClass('error');
                }
            })
        }
    }   
};

但它并没有按照我的预期行事。只有一个指令正在运作！当我尝试删除属性 alpha 时，必需现在可以使用了！有人能告诉我它为什么会这样吗？

Answer 1

他们没有一起工作，因为他们互相覆盖了变化。我添加了额外的条件来避免这种情况：

＆＃13;

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div  ng-controller="MainCtrl">
            <input required="" alpha="" type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('MainCtrl', ['$scope', function($scope) {

            }]).directive('required', function() {
                return {
                    restrict: 'A',
                    link: function(scope, elem, attrs) {
                        elem.on('keyup', function(event) {
                            var title = 'This input is required!';
                            if(elem.val().trim() == '') {
                                elem.prop('title', 'This input is required!');
                                elem.addClass('error');
                            } else if (elem.prop('title') == title) {
                                elem.prop('title', '');
                                elem.removeClass('error');
                            }
                        })
                    }
                }   
            }).directive('alpha', function() {
                return {
                    restrict: 'A',
                    link: function(scope, elem, attrs) {
                        var regexp = /^[A-Za-z]*$/;
                        var char;
                        elem.on('keyup', function(event) {
                            var title = 'This input can contain letters only!';
                            if(!regexp.test(elem.val())) {
                                elem.prop('title', title);
                                elem.addClass('error');
                            } else if (elem.prop('title') == title) {
                                elem.prop('title', '');
                                elem.removeClass('error');
                            }
                        })
                    }
                }   
            });
        </script>
    </body>
</html>

＆＃13;

Answer 2

使用内置指令和控制器功能可以实现您的目标：

<!-- HTML -->
<input type="text" name="firstName" placeholder="First name" ng-model="someProp"
        ng-pattern="/^[A-Za-z ñÑ]*$/" ng-required="true"
        title="{{form1.firstName.$error.pattern?'Should only contain letters':
                 form1.firstName.$error.required?'This field is required':''}}" />

/* CSS */
input.ng-invalid-pattern,
input.ng-invalid-required {
    /* Put the styles for your .error class here */
}

另请参阅此 short demo 。

元素上的多个指令不起作用

2 个答案: