6

これは、直接的な解決策ではなく、この問題を解決するための組織的なアプローチです。私の質問自体は、互いに依存せず、それぞれの目的を果たすために独立して動作できる 2 つのディレクティブがある場合です。ただし、ディレクティブの 1 つが存在する場合は、もう一方の準備ができたら、もう 1 つのディレクティブを実行する必要があります。この場合、関数呼び出しやイベントをハードコードする必要なく、そのように機能することを確認する論理的な方法は何でしょうか?

たとえば、ある種のグリッドを構築する 1 つのディレクティブがあるとします。

angular.module('App').directive('appGrid',function() {
  return function($scope, element) {
    $scope.rows = ...
  };
});

次に、要素を水平方向にスクロール可能にする別のディレクティブがあります。

angular.module('App').directive('appPane',function() {
  return function($scope, element) {
    element.attachHorizontalScroll();
  };
});

したがって、私の HTML の例は次のようになります。

<div data-app-grid data-app-pane>
  <div data-ng-repeat="row in rows">
    <div data-ng-repeat="cell in row.cells">
      {{ cell.data }}
    </div>
  </div>
</div>

基本的に、ディレクティブは、ディレクティブが実行され、テーブルの準備が整ったappPane後に実行する必要があります。appGrid

私が考えることができる1つの解決策は、$scope.$watchメソッドを使用して準備ができていることを確認するためにデータを監視することですが、これは問題を引き起こします.複数のディレクティブが、監視されている同じスコープ変数に書き込んでいる場合。

もう 1 つの解決策は、最初のディレクティブにイベント (elementReady など) を発行させ、次に 2 番目のディレクティブに引き継がせることです。しかし、最初のディレクティブが存在しない場合はどうなるでしょうか? では、2 番目のディレクティブは、その仕事をいつ行うべきかをどのように知るのでしょうか? 基本的に他のすべての要素に対してイベントを発生させる空のディレクティブである別のディレクティブが存在する可能性がありますが、これはちょっとしたハックです。また、他の複数のディレクティブがelementReadyイベントを発生させた場合はどうなりますか?

もう 1 つの解決策は、共有サービスを介して 2 つのディレクティブ間でロジックを共有する 3 番目のディレクティブを作成することです。しかし、これにより、3 番目のディレクティブが他のディレクティブとその間の共有サービスの両方に完全に依存するようになります。これには、ディレクティブを記述するための実際のコードだけでなく、より多くの不必要なテスト コードも必要です (1 + 1 行のコードしか必要としない 2 番目のソリューションと比較して、はるかに多くのコード)。

何か案は？

4

3 に答える 3

3

同様の問題がありました。要素をクリックした後に配線が発生したため、優先度を使用できませんでした。$rootScope を使用して解決しました。簡単な例を次に示します。

link : function (scope, element, attrs) {
   element.on('click', function() {
       $rootScope.$emit('myEvent', myData);
   });
}

他のディレクティブでは、myEventを「リッスン」します。

link : function (scope, element, attrs) {
   $rootScope.$on('myEvent', function(data) {
      // do sth
   });
}
于 2012-12-20T10:56:03.943 に答える
3

ディレクティブの優先度属性を見てください。

angular docs からの正確な説明のコピーを次に示します。

優先度- 1 つの DOM 要素に複数のディレクティブが定義されている場合、ディレクティブが適用される順序を指定する必要がある場合があります。優先度は、コンパイル関数が呼び出される前にディレクティブをソートするために使用されます。優先度の高いものが先になります。同じ優先度内のディレクティブの順序は定義されていません。

あなたはそれを見つけることができるはずです

http://docs.angularjs.org/guide/directive

ディレクティブの記述(ロング バージョン) ---ディレクティブ定義オブジェクトセクションの下。

これがあなたの質問に答えることを願っています。

于 2012-11-30T09:53:00.947 に答える
2

素晴らしい質問です。属性とイベントの組み合わせを使用します。

ディレクティブのユーザー (つまり、HTML を書いている人) だけが、2 つのディレクティブを相互作用させたい (つまり、依存して実行したい) ことを知っているので、何らかの方法でこれを指定する必要があると思います。良い方法（唯一の方法？）。ディレクティブが対話する必要があることを認識したら、イベントを使用してシグナリングを行うことができます。

したがって、ディレクティブ B がディレクティブ A を待機する必要がある場合、1 つまたは複数の属性を使用して、誰が待機するか、誰がイベントを起動するか、および/またはイベント名を指定できます。(これはもちろん、2 つ以上のディレクティブと 1 つ以上のイベントに拡張できます。) いくつかの可能な実装:

<div data-app-grid data-app-pane idc-wait="appPane" idc-event="idc-appGridDone">
<div data-app-grid data-app-pane idc-wait="appPane" idc-emit="appGrid" idc-event="idc-appGridDone">

属性を調べることで、appGrid ディレクティブは待機する必要はないと判断できますが、イベント「idc-appGridDone」を発行する必要があります。同様に、appPane ディレクティブは属性を調べることで、実行前に「idc-appGridDone」イベントを待機する必要があることを判断できます。

ディレクティブがこれらの特別な「ディレクティブ間通信」/「idc-」属性のいずれも見つからない場合、ディレクティブは通常どおり実行されます (イベントなし、待機なし)。

「(in)dependent ディレクティブ間通信パターン」が誕生します。☺

于 2013-01-12T22:14:55.813 に答える