自定義密碼驗證指令不適用

Question

我正在使用AngularJS，我想輸入一個密碼確認字段來檢查兩個條目是否匹配。 為此，我使用了本教程中的自定義指令： http : //odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspx 。

由於某些原因，匹配檢查不會給出任何結果。 當我輸入不同的密碼時，它仍然認為這些字段有效。 我認為我缺少有關AngularJS中自定義指令用法的信息，但這有點令人困惑，因為我亂丟了與教程中完全相同的代碼。

我還在這里檢查了相關問題，但也沒有運氣。

HTML：

<div ng-app="myApp">
  <h1>Register!</h1>
    <form name="registrationForm" novalidate>
       <div class="form-group">
            <label>User Name</label>
            <input type="text" name="username" class="form-control" ng-model="registration.user.username" required />
            <p ng-show="registrationForm.username.$error.required">Required<br/><br/></p>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="password" class="form-control" ng-model="registration.user.password" required />
            <p ng-show="registrationForm.password.$error.required">Required<br/><br/></p>
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" name="confirmPassword" class="form-control" ng-model="registration.user.confirmPassword" required compare-to="registration.user.password" />
            <p ng-show="registrationForm.confirmPassword.$error.required">Required<br/><br/></p>
            <p ng-show="registrationForm.confirmPassword.$error.compareTo">Passwords must match !</p>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Register!</button>
        </div>
    </form>
</div>

JS：

angular.module('myApp', [])

.directive('compareTo', function(){
      return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function(scope, element, attributes, ngModel) {

            ngModel.$validators.compareTo = function(modelValue) {
                return modelValue == scope.otherModelValue;
            };

            scope.$watch("otherModelValue", function() {
                ngModel.$validate();
            });
        }
      };
    })

JSFiddle顯示問題： http : //jsfiddle.net/ptb01eak/

教程中的工作Plunkr： http ://plnkr.co/edit/FipgiTUaaymm5Mk6HIfn?p=preview

謝謝您的幫助！

Answer 1

問題來自您的AngularJS版本，我在jsfiddle中將其更新為： AngularJS 1.5.6 （ CDN鏈接 ），並且可以工作（ 新jsfiddle ）。