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