$は変更に際して発射せず、補間しません。

Question

TLDR：なぜAngularのngMinlengthは$補間値を使って$ observe更新を受け取りますか？

Link to plnkr

私は角1.3でカスタム検証ディレクティブに取り組んでいますし、一貫性のないと思われる何かに気づきました。角度のあるディレクティブはattrから補間された更新を得るようです$ observe、しかし私が作成するディレクティブは同じように動作しません。

$ watchを使用して修正したり、補間された値をバインドすることはできますが、既存の検証ディレクティブとは矛盾します。違いは何ですか？私のカスタムディレクティブは組み込みのバリデーションディレクティブと同様に動作させることができますか？

角度の指令ngMinlengthディレクティブは "MINLENGTH" 属性を観察$ではなく、 "ngMinlength" 属性であることを

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

お知らせ

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

マイディレクティブ。 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' 
}; 

として定義され、角度は独自の属性ベースの検証ディレクティブの特別な処理があります。したがって、属性を監視するのではなく、スコープのプロパティを監視する必要があります。