我试图找出如何在角使用自定义指令。我公司生产的以下为谷歌上搜索地段和教程的结果。它应该检查

，我的密码字段输入足够强，即包含字母，数字和至少8个字符的长度。的密码字段中的确认密码字段匹配。

它完美的匹配，即部分二，然而，它似乎并没有在检查强度方面做任何事情，我没有得到任何控制台错误。谁能告诉我，我要去哪里错了，或者建议这样做的更好的办法？

我在我的基础强度校核在这个小提琴

  angular.module（'对myApp'）  .directive（'比赛'，['$解析'，函数（$解析）{        返回{            要求：'ngModel'，            限制：'A'，            链接：功能（范围，ELEM，ATTRS，CTRL）{//这部分不匹配                范围。$表（函数（）{                    返回（CTRL $质朴和放大器;＆安培; angular.isUndefined（CTRL $ modelValue））|| $解析（attrs.match）（范围）=== CTRL $ modelValue。                }，功能（CurrentValue的）{                    CTRL $ setValidity（'比赛'，CurrentValue的）。                }）;            }，//这部分应该检查实力            Ctrl键。$ parsers.unshift（功能（viewValue）{                scope.pwdValidLength =（viewValue＆放大器;＆安培; viewValue.length＆GT; = 8有效：不确定的）;                scope.pwdHasLetter =（viewValue＆安培;＆安培; /[A-z]/.test(viewValue））？ 有效：未定义;                scope.pwdHasNumber =（viewValue＆安培;＆安培; /\\d/.test(viewValue））？ 有效：未定义;              如果（scope.pwdValidLength＆安培;＆安培; scope.pwdHasLetter和放大器;＆安培; scope.pwdHasNumber）{                    。CTRL $ setValidity（'PWD'，真）;                    返回viewValue;                }其他{                    。CTRL $ setValidity（'PWD'，FALSE）;                    返回不确定的;                }                }）;        };    }]）; 

下面是我的html：

 ＆LT;形式NAME =myForm会＆GT;＆LT; D​​IV CLASS =控制组＆GT;  ＆LT;标签类=控制标签为=控件inputPassword＆GT;密码和LT; /标签＆gt;  ＆LT; D​​IV CLASS =控制＆GT;    ＆LT;输入NG模型=user.password的阶级=直接帮助数据-NG-CLASS ={'NG-无效。myForm.confirmPassword $ error.match}密码验证所需TYPE =密码ID =密码占位符=密码＆GT;    ＆LT; D​​IV CLASS =输入帮助＆GT;      ＆LT;＆H5 GT;密码必须满足以下要求：其中，/ H5＆GT;      ＆LT; UL＆GT;        ＆LT;李纳克级=pwdHasLetter＆GT;至少＆LT;强 - 酮字母LT; / STRONG＆GT;＆LT; /李＆GT;        ＆LT;李纳克级=pwdHasNumber＆GT;至少＆LT;强 - 酮号＆LT; / STRONG＆GT;＆LT; /李＆GT;        ＆LT;李纳克级=pwdValidLength＆GT;至少＆LT;强＆GT; 8个字符长＆LT; / STRONG＆GT;＆LT; /李＆GT;      ＆LT; / UL＆GT;    ＆LT; / DIV＆GT;  ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;                        ＆LT; BR /＆GT;                        ＆LT;输入NG模型=user.passwordConfirmTYPE =密码数据匹配=user.password的NAME =confirmPassword级=表格控占位=确认密码/＆GT;                        ＆LT; BR /＆GT;                        ＆LT; D​​IV NG秀=$ myForm.confirmPassword error.match。＆GT;密码不匹配＆LT;！/ DIV＆GT;                        ＆LT; BR /＆GT;                        ＆LT; BR /＆GT;                        ＆LT; A HREF =＃/家NG点击=的createUser（）级=BTN BTN小BTN-小学＆GT;注册＆LT; / A＆GT;＆LT; /表及GT; 

解决方案

上面的code的错误（一个控制$ parsers.unshift（...）部分的 的功能之外，我想这些都是错别字）

总之，改变分析器功能的总是的返回 viewValue ，再加上一些小的变化，可能不适合这个重要的（如检查没有保存的范围，而在本地变量，它们的值是布尔值，而不是有效 / 未定义） ，是卓有成效的：

  app.directive（'比赛'，['$解析'，函数（$解析）{    返回{        要求：'ngModel'，        限制：'A'，        链接：功能（范围，ELEM，ATTRS，CTRL）{//这部分不匹配            范围。$表（函数（）{                返回（CTRL $质朴和放大器;＆安培; angular.isUndefined（CTRL $ modelValue））|| $解析（attrs.match）（范围）=== CTRL $ modelValue。            }，功能（CurrentValue的）{                CTRL $ setValidity（'比赛'，CurrentValue的）。            }）;//这部分应该检查实力            Ctrl键。$ parsers.unshift（功能（viewValue）{                VAR pwdValidLength，pwdHasLetter，pwdHasNumber;                pwdValidLength =（viewValue＆安培;＆安培; viewValue.length＆GT; = 8真：假的？）;                pwdHasLetter =（viewValue＆安培;＆安培; /[A-z]/.test(viewValue））？真假;                pwdHasNumber =（viewValue＆安培;＆安培; /\\d/.test(viewValue））？真假;                如果（pwdValidLength＆安培;＆安培; pwdHasLetter和放大器;＆安培; pwdHasNumber）{                    。CTRL $ setValidity（'PWD'，真）;                }其他{                    。CTRL $ setValidity（'PWD'，FALSE）;                }                返回viewValue;            }）;        }，    };}]）; 

请参阅小提琴： http://jsfiddle.net/EHJq8/

I'm trying to figure out how to use custom directives in Angular. I've produced the following as a result of lots of googling and tutorials. It's supposed to check

That my "Password" field input is strong enough, ie contains a letter, a number and is at least 8 characters in length. That the "Password" field matches the "Confirm Password" field.

It works perfectly for the matching, ie part 2. However, it doesn't seem to do anything in terms of checking strength, and I'm not getting any console errors. Can anybody tell me where I'm going wrong or suggest a better way of doing this?

I'm basing my strength checking code on this fiddle

angular.module('myApp')
  .directive('match',['$parse', function ($parse) {
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, elem, attrs, ctrl) {

//This part does the matching

                scope.$watch(function() {
                    return (ctrl.$pristine && angular.isUndefined(ctrl.$modelValue)) || $parse(attrs.match)(scope) === ctrl.$modelValue;
                }, function(currentValue) {
                    ctrl.$setValidity('match', currentValue);
                });
            },

//This part is supposed to check the strength

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


                });


        };
    }]);

Here is my html:

<form name = "myForm">

<div class="control-group">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <input ng-model="user.password" class="immediate-help" data-ng-class="{'ng-invalid':myForm.confirmPassword.$error.match}" password-validate required type="password" id="password" placeholder="Password">
    <div class="input-help">
      <h5>Password must meet the following requirements:</h5>
      <ul>
        <li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
        <li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
        <li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li>
      </ul>
    </div>
  </div>
 </div> 


                        <br />

                        <input ng-model="user.passwordConfirm" type="password" data-match="user.password" name="confirmPassword" class="form-control" placeholder = "Confirm Password"/> 

                        <br />
                        <div ng-show="myForm.confirmPassword.$error.match">Passwords do not match!</div>
                        <br />
                        <br />
                        <a href = "#/home" ng-click="createUser()"  class="btn btn-small btn-primary">Register</a>

</form>

解决方案

The code above has errors (for one the ctrl.$parsers.unshift(...) part is outside the function; I guess these are typos).

Anyway, changing the parser function to always return the viewValue, plus a few minor changes that may not be important for this (e.g. the checks are not kept in scope, rather in local vars, their value is boolean, not "valid"/undefined), does the trick:

app.directive('match',['$parse', function ($parse) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
//This part does the matching
            scope.$watch(function() {
                return (ctrl.$pristine && angular.isUndefined(ctrl.$modelValue)) || $parse(attrs.match)(scope) === ctrl.$modelValue;
            }, function(currentValue) {
                ctrl.$setValidity('match', currentValue);
            });

//This part is supposed to check the strength
            ctrl.$parsers.unshift(function(viewValue) {
                var pwdValidLength, pwdHasLetter, pwdHasNumber;

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

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

See fiddle: http://jsfiddle.net/EHJq8/