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

【问题标题】：Communication between child and parent directive子指令与父指令之间的通信
【发布时间】：2015-04-16 16:00:28
【问题描述】：

我正在试图弄清楚如何让子指令与它的父指令通信

我基本上有这个 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

【问题讨论】：

【解决方案1】：

您可以在 myPanel 指令中创建控制器。然后在 myData 指令中需要这个控制器。并且当子指令没有数据时，调用控制器方法隐藏父。

例如在你的父 (myPanel) 指令中：

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

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

在 myData 指令中需要这个控制器：

require:'^myPanel'

然后，在需要时调用控制器函数

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

【讨论】：

【解决方案2】：

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

您的 HTML。

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

在您的指令中，只需注意属性的变化。

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

它是明确而简单的，不会强制建立可能不存在的依赖关系。希望这对某些人有所帮助。

【讨论】：