$ parser.unshift ??这是如何工作的?

时间:2013-09-30 10:18:30

标签: angularjs angularjs-directive

 link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {

            scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined);
            scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined;
            scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined;

            if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) {
                ctrl.$setValidity('pwd', true);
                return viewValue;
            } else {
                ctrl.$setValidity('pwd', false);                    
                return undefined;
            }

        });
    }

http://jsfiddle.net/adamdbradley/Qdk5M/

在上面提到的小提琴中,如何进行密码验证? $ parser.unshift做了什么?什么是test(viewValue).....的用途? 我已经推荐了AngularJs的主要网站,但无法理解任何事情...... 请指导我如何验证......

我是angularJS的新手..

2 个答案:

答案 0 :(得分:64)

以下是逐步说明。请注意,文档非常好:the formsthe $parsers上的页面是您正在寻找的页面。

link: function(scope, elm, attrs, ctrl) {
    /**
     * This function is added to the list of the $parsers.
     * It will be executed the DOM (the view value) change.
     * Array.unshift() put it in the beginning of the list, so
     * it will be executed before all the other
     */
    ctrl.$parsers.unshift(function(viewValue) {

        scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined); // Check the length of the string
        scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined; // Check if the string contains letter. RegExp.test() simply returns a boolean if the string matches the regex.
        scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined; // Check if the string contains digit. Same remark.

        if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) { // If all is good, then…
            ctrl.$setValidity('pwd', true); // Tell the controlller that the value is valid
            return viewValue; // Return this value (it will be put into the model)
        } else { // … otherwise…
            ctrl.$setValidity('pwd', false); // Tell the controlller that the value is invalid
            return undefined; // When the value is invalid, we should return `undefined`, as asked by the documentation
        }

    });
}

答案 1 :(得分:8)

@Pawan Kalyan - Blackhole非常好地解释了这个问题(他的回答是投票)。但我认为你也应该阅读这篇有用的博客: - $parsers and $formatters in Custom Validation Directives in Angular JS -

http://java.dzone.com/articles/parsers-and-formatters-custom

快乐编码:)