angularjs - 子ディレクティブと親ディレクティブの間の通信

Question

子ディレクティブを親ディレクティブと通信させる方法を理解しようとしています

私は基本的にこのhtmlマークアップを持っています

<myPanel>
    <myData dataId={{dataId}}></myData>
</myPanel>

myData ディレクティブで、利用可能なデータがない場合、myPanel を非表示にしたいと考えています。

私が試したmyDataディレクティブコントローラーで

$scope.$emit('HideParent');

そして、私が試したmyPanelコントローラーで

$scope.$on('HideParent', function () { $scope.hide = true; });

また、

$scope.$watch('HideParent', function () { if (value) { $scope.hide = true; }});

どちらの状況でも、myPanel ディレクティブは $emit を受け取りません

score 1 · Accepted Answer

myPanel ディレクティブでコントローラーを作成できます。次に、myData ディレクティブでこのコントローラーを必要とします。子ディレクティブにデータがない場合は、コントローラーメソッドを呼び出して親を非表示にします。

たとえば、親 (myPanel) ディレクティブの場合:

controller: function($scope, $element){
  $scope.show = true;

  this.hidePanel = function(){
    $scope.show = false;
  }      
}

myData ディレクティブでは、次のコントローラーが必要です。

require:'^myPanel'

そして、必要なときにコントローラー関数を呼び出します

if (!scope.data){
  myPanelCtrl.hidePanel();
}

score 0 · Accepted Answer

親ディレクティブのコントローラーが必要な上記の回答は、本当に依存関係がある場合に最適です。同様の問題を解決する必要がありましたが、子ディレクティブを複数の親ディレクティブ内で、または親ディレクティブなしで使用したかったので、これが私がしたことです。

あなたのHTML。

<myPanel>
    <myData dataId={{dataId}}></myData>
</myPanel>

ディレクティブでは、属性の変更を監視するだけです。

controller: function ($scope, $element, $attrs) {
    $attrs.$observe('dataId', function(dataId) { $scope.hide = true; } );
}

存在しない可能性のある依存関係を強制することなく、明示的かつ単純です。これが一部の人々に役立つことを願っています。

2 に答える 2