$觀察沒有觸發變化，而不是插值

Question

TLDR：爲什麼角度的ngMinlength接收$觀察插值更新，但我的自定義驗證指令不是？

Link to plnkr

我工作的一個自定義的驗證指令在角1.3和已經注意到一些似乎不一致。 angular中的指令似乎從attr。$ observe獲得內插更新，但我創建的指令的行爲方式不同。

我可以使用$ watch修復它，或綁定一個插值，但與現有的驗證指令不一致。有什麼區別，以及如何使我的自定義指令與內置的驗證指令類似地工作？

角的指令

var minlengthDirective = function() { 
     return { 
      restrict: 'A', 
      require: '?ngModel', 
      link: function(scope, elm, attr, ctrl) { 
      if (!ctrl) return; 

      var minlength = 0; 
      attr.$observe('minlength', function(value) { 
       minlength = int(value) || 0; 
       ctrl.$validate(); 
      }); 
      ctrl.$validators.minlength = function(modelValue, viewValue) { 
       return ctrl.$isEmpty(viewValue) || viewValue.length >= minlength; 
      }; 
      } 
     }; 
     }; 

我的指令

function observeMinLength($log){ 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function (scope, elm, attr, ctrl) { 
      if (!ctrl) return; 

      var min; 

      //Problem 1: observered value is not interpolated 
      //Problem 2: observe is only fired one time 
      attr.$observe('observeMinlength', function (value) { 
       $log.debug('observed value: ' + value); 
       min = parseInt(value, 10) || 0; 
       ctrl.$validate(); 
      }); 

      ctrl.$validators.mymin = function (modelValue, viewValue) { 
      var len = 0; 
      if (viewValue){ 
       len = viewValue.length; 
      } 
      return ctrl.$isEmpty(viewValue) || viewValue.length >= min; 
      }; 
     } 
    }; 
} 

Answer 1

注意，ngMinlength指令是$觀察 「使用MINLENGTH」 屬性，而不是 「ngMinlength」 屬性。我相信問題在於Angular的輸入指令是根據插值設置minlength屬性...所以，雖然ngMinlength屬性不會隨着其值的變化而改變，但minlength屬性的確如此，因此它是可觀察的。在您的指令中，屬性observeMinLength不會更改，但您傳入的範圍屬性的值會執行。

如果您查看角源代碼：https://github.com/angular/angular.js/blob/13b7bf0bb5262400a06de6419312fe3010f79cb2/src/ng/directive/attrs.js#L379，您可以看到角正在監視範圍變量併爲ALIASED_ATTR集合中的所有屬性設置屬性變量。該集合在https://github.com/angular/angular.js/blob/2e0e77ee80236a841085a599c800bd2c9695475e/src/jqLite.js#L575

因此，在短期定義爲

var ALIASED_ATTR = { 
    'ngMinlength': 'minlength', 
    'ngMaxlength': 'maxlength', 
    'ngMin': 'min', 
    'ngMax': 'max', 
    'ngPattern': 'pattern' 
}; 

，角都有它自己的屬性根據驗證的指令進行特殊處理。所以你需要觀察你的範圍屬性而不是觀察屬性。