3

2つのディレクティブがあるmy-awesome-tableとしましょうmy-awesome-table-cell。ディレクティブmy-awesome-table-cellの外で使用したくありません。my-awesome-tableこれを強制する方法はありますか？my-awesome-tableディレクティブの外で使用するとエラーがスローされるようにするには？

4

2 に答える 2

5

これを行うには、外部ディレクティブを取得してDOMに「コントローラーディレクティブ」を配置し、次に内部ディレクティブを取得してこの「コントローラーディレクティブ」を「要求」します。

このプランクを参照してください：http：//plnkr.co/edit/QPNPu4。

app.directive('myAwesomeTable', function() {
  return {
    controller: function($scope) {},
    link: function(scope, element) {
      ...
    }
  };
});

app.directive('myAwesomeTableCell', function() {
  return {
    require: '^myAwesomeTable',
    link: function(scope, element, attributes, controller) {
      ...
    }
  };
});

？^を使用して要件をオプションにし、リンク関数内で定義されているコントローラーパラメーターを確認して、これをきめ細かく制御することもできます。

于 2012-11-10T05:49:30.260 に答える
1

これは、自分のコードを制御できることを前提として、問題にはならないはずです...ただし、問題になる状況では、リンク関数をチェックインして、ディレクティブが適切な親ディレクティブに含まれているかどうかを確認できます。

app.directive('testChild', function() {
  return {
    restrict: 'E',
    template: '<div>child</div>',
    link: function(scope, elem, attr){
      if(elem.parents('test').length === 0) {
        throw new Error('Must be inside test directive');
      }
    }
  };
});

app.directive('test', function(){ 
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>' +
      '<h3>parent</h3>' +
      '<div ng-transclude></div>' +
    '</div>'    
  };
});

テストマークアップ：

  <test>
    <test-child></test-child>
    <test-child></test-child>
  </test>
  <!-- this will throw an error in JS -->
  <test-child></test-child>

ノート

リンク関数のelem引数は、JQueryも参照していない限り、JQuery LITEオブジェクトであり、完全なJQueryオブジェクトです。JQueryLiteには.parents()機能がありません。引き続き親を確認できますが、可能であればここでJQueryを使用することをお勧めします。

知っておくべきもう1つのことはelem.remove()、リンク関数でディレクティブを削除するために使用しない限り、エラーのあるディレクティブは引き続きレンダリングされることです。

また、replace:true親ディレクティブで使用する場合は、呼び出しでクエリできるクラスや属性など、それを識別するためにテンプレートに何かを入れる必要がありますparent()。

于 2012-11-09T14:05:36.020 に答える