$ watch не работает с директивой

Question

Итак, я создаю директиву, которая будет соответствовать паролям. Я пытался выяснить свой собственный способ сделать это. И когда, наконец, хотя я нашел решение, это не сработало. Вот код dricetive:

directive('matchPass', function() { 
    return { 
    //restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
     scope.$watch(attrs.ngModel, function (n) { 
     ngModelCtrl.$setValidity('matchPass', n == scope.registerForm.password.$viewValue) 
     }) 
     scope.$watch(attrs.matchPass, function (n) { 
     ngModelCtrl.$setValidity('matchPass', n == scope.registerForm.password.$viewValue) 
     }) 
    } 
    } 
}) 

Проблема здесь

scope.$watch(attrs.matchPass... 

Это не срабатывает, то первый из них работает отлично. Я застрял и потерялся.

Посмотреть код

<div class="marginAuto"> 
     <md-input-container> 
      <label>Password</label> 
      <input required="" name="password" ng-model="password" type="password" ng-minlength="8" ng-maxlength="30"> 
      <div ng-messages="registerForm.password.$error"> 
       <div ng-message="required">This is required!</div> 
       <div ng-message-exp="['required', 'minlength', 'maxlength']"> 
        8 - 30 characters! 
       </div> 
      </div> 
     </md-input-container> 
    </div> 
    <div class="marginAuto"> 
     <md-input-container> 
      <label>Repeat password</label> 
      <input required name="repassword" ng-model="repassword" type="password" match-pass="password"> 
      <div ng-messages="registerForm.repassword.$error" na> 
       <div ng-message="required">This is required!</div> 
      </div> 
     </md-input-container> 
    </div> 
    <div class='msg-block' ng-show='registerForm.$error'> 
     <span class='msg-error' ng-show='registerForm.repassword.$error.matchPass'> 
     Passwords don't match. 
     </span> 
    </div> 

Answer 1

Вы можете попробовать избавиться от $watch и использовать ng-change вместо этого, что-то вроде ниже должен работать для вас.

Итак, измените директиву на функцию вместо часов.

directive('matchPass', function() { 
    return { 
    //restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 

     ngModelCtrl.$setValidity('matchPass', false); 

     scope.checkMatch = function(password, repassword) { 
     if (password === repassword) { 
      ngModelCtrl.$setValidity('matchPass', true); 
     } else { 
      ngModelCtrl.$setValidity('matchPass', false); 
     } 
     }) 
    } 
    } 
}) 

Теперь только подправить ниже replaceing атрибут директивы

<div class="marginAuto"> 
     <md-input-container> 
      <label>Password</label> 
      <input required="" name="password" ng-model="password" type="password" ng-minlength="8" ng-maxlength="30"> 
      <div ng-messages="registerForm.password.$error"> 
       <div ng-message="required">This is required!</div> 
       <div ng-message-exp="['required', 'minlength', 'maxlength']"> 
        8 - 30 characters! 
       </div> 
      </div> 
     </md-input-container> 
    </div> 
    <div class="marginAuto"> 
     <md-input-container> 
      <label>Repeat password</label> 
      <input required name="repassword" ng-model="repassword" type="password" ng-change="checkMatch(password, repassword)"> 
      <div ng-messages="registerForm.repassword.$error" na> 
       <div ng-message="required">This is required!</div> 
      </div> 
     </md-input-container> 
    </div> 
    <div class='msg-block' ng-show='registerForm.$error'> 
     <span class='msg-error' ng-show='registerForm.repassword.$error.matchPass'> 
     Passwords don't match. 
     </span> 
    </div> 

Answer 2

я пришел с моим собственным решением.

link: function (scope, element, attrs, ngModelCtrl) { 
     if (!scope.registerForm[attrs.matchPass].$invalid) { 
     scope.$watchGroup([attrs.ngModel, attrs.matchPass], function (n) { 
      console.log(n) 
      ngModelCtrl.$setValidity('matchPass', n[0] === n[1]) 
     }) 
     } 

Хорошо работает.