1 
 <FORM>
 <DIV class="outer-class">
      <INPUT class="toValidate" type = "text"/>
      <INPUT class="somethingElse" type= "text"/>
      <INPUT class="toValidate" type ="text"/>
 </DIV>
 <DIV class="outer-class">
      <INPUT class="toValidate" type = "text"/>
      <INPUT class="somethingElse" type= "text"/>
      <INPUT class="toValidate" type ="text"/>
 </DIV>
 <INPUT type="submit"/>
 </FORM>

私の質問は次のとおりです。フォームが有効であるために、ネストされたtoValidatesが一意の値を持ち、同じ外部div内にのみあることを確認するにはどうすればよいですか？このロジックはOuterClassDirectiveに入れるべきだと思いますが、ロジックがどのように見えるべきか理解できないようです。

何かアドバイスをいただければ幸いです。

ありがとう！

4

2 に答える 2

1

Angular ホームページの 'tabs' および 'pane' ディレクティブは、同様の問題を解決します。子の 'pane' ディレクティブは、親の 'tabs' ディレクティブと通信する必要があります。

外部クラス ディレクティブでコントローラーを定義してから、コントローラーでメソッドを定義します ( this$scope は使用しないでください)。次にrequire: '^outerclass'、toValidate ディレクティブで。toValidate リンク関数では、値の変更を $watch し、外部クラス コントローラーでメソッドを呼び出して値を渡すことができます。外部クラス ディレクティブで検証を行います。

AngularJS コントローラーの 'this' と $scopeも参照してください。

于 2013-01-08T21:37:50.347 に答える
1

これはどうですか。あなたの outerClassDirective には、使用された値を配列に格納するコントローラーが必要です。本体の入力フィールドをトランスクルージョンします。toValidate ディレクティブは、outerClassDirective を必要とし、モデル値を配列に追加して、存在する場合は無効にします。

ここに試してみます（テストされていません）：

app.directive('outerClass', function() {
   var values = [];
   var valid = true;
   return {
      template: '<div ng-transclude></div>',
      transclude: true,
      replace: true,
      require: 'ngModel',
      controller: function() {
         this.addValue: function(value) {
            valid = values.indexOf(value) > -1;
            values.push(value);
         };
      },
      link: function(scope, elm, attrs, ctrl) {
         ctrl.$setValidity('toValidate', valid)
      }
   };
});

app.directive('toValidate', function() {
   return {
        require: '^outerClass',
        link: function(scope, elm, attrs, ctrl) {
           ctrl.addValue(attrs.value);
        } 
      }
   };
});
于 2013-01-08T21:53:56.743 に答える