子指令与父指令之间的通信

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

Answer 1

您可以在myPanel指令中创建控制器。 然后在myData指令中需要此控制器。当child指令没有数据时，调用controller方法隐藏父级。

例如，在您的父（myPanel）指令中：

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

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

在myData指令中需要此控制器：

require:'^myPanel'

然后，在需要时调用控制器功能

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

看这个Plunker example

Answer 2

如果确实存在依赖关系，那么需要父指令控制器的上述答案是一个很好的答案。我有一个类似的问题需要解决，但是想在多个父指令中使用子指令，甚至没有父指令，所以这就是我所做的。

您的HTML。

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

在您的指令中，只需注意属性的更改。

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

如果不存在依赖关系，那么它是明确而简单的。希望这有助于一些人。