Значение атрибута ngModel атрибута не определено при просмотре

Question

Я немного смущен тем, как значения записываются в директиве в AngularJS. У меня есть следующий код, который очень хорошо работает при проверке того, идентичны ли 2 пароли в полях ввода

[HTML]

<div class="form-group"> 
       <label for="profileSecret" class="control-label col-sm-4">WPA2 Password:</label> 
       <div class="col-sm-6"> 
        <input type="password" name="profileSecret" class="form-control" ng-model="profile.secret"> 
       </div> 
       </div> 

       <div class="form-group"> 
       <label for="profileSecret" class="control-label col-sm-4">WPA2 Password (Confirm):</label> 
       <div class="col-sm-6"> 
        <input type="password" name="profileSecretRepeat" class="form-control" is-valid-psk="profile.secret" ng-model="profile.secretRepeat"> 
       </div> 
       </div> 

[Работали УД]

.directive('isValidPsk',function(){//camel case normalize, remember 
     return { 
      restrict:'A', 
      require: 'ngModel', 
      link: function(scope, elt, attr, ctrl){ 
       scope.$watchGroup([attr.isValidPsk,attr.ngModel],function(newVal, oldVal){ 
        validate(newVal[0],newVal[1]); 
       }); 

       var validate = function(value1, value2){ 
        if (typeof value1 == 'undefined' || typeof value2 == 'undefined'){ 
         ctrl.$setValidity('isEqualPwd',false); 
        } 
        else{ 
         var res = value1 != '' && value1 == value2 && (value1.length >= 8 && value1.length <= 64); 
         ctrl.$setValidity('isEqualPwd',res); 
        } 
       }; 
      } 
     }; 
    }) 

Приведенный выше код работает отлично, как я ожидал, но мне интересно, почему следующий код не получает то, что я ожидал, attr.ngModel просто дал мне «неопределенный» вместо фактического значения «profile.secretRepeat»?

[УД не работает]

.directive('isValidPsk',function(){//camel case normalize, remember 
     return { 
      restrict:'A', 
      require: 'ngModel', 
      scope: { 
       isValidPsk: '=', 
      }, 
      link: function(scope, elt, attr, ctrl){ 
       scope.$watchGroup(['isValidPsk',attr.ngModel],function(newVal, oldVal){ 

        console.log(newVal[0]); 
        //validate(newVal); 
        console.log(newVal[1]); //>> why this is undefined?? 
       }); 

Большое спасибо за помощь!

Answer 1

Поскольку ваша 1-я директива не содержит изолированного объема, вы получаете как обновленные значения внутри вас. scope.$watchGroup функция. Но в вашем измененном коде вы выделили область внутри своей директивы, а это значит, что текущая область не наследуется от области содержимого. Для этого вам нужно явно указать область parent из директивы.

Код

scope.$watchGroup(['isValidPsk','$parent.' + attr.ngModel], function(newVal, oldVal) { 
    console.log(newVal[0]); 
    //validate(newVal); 
    console.log(newVal[1]); 
});