javascript - ng-transclude 会停止 Angular.js 中的事件传播吗？

Question

当我尝试通过 $scope 对象将事件从我的指令发送到嵌套指令时，就会出现问题。例如$scope.broadcast('event')，子指令不接收事件，但是当我使用 $rootScope 对象时，它可以工作，例如$rootScope.broadcast('event').

TL；DR：为什么这不起作用：http ://plnkr.co/edit/27qYiHOilpVABSwMI0Fb?p=preview当它起作用时：http ://plnkr.co/edit/o91yFKnQzHp7edUTTkJE?p=preview

编辑：在 angular.js 版本 1.3.0 及更高版本中，这不再是问题！！！

Answer 1

嵌入创建一个“孤立”范围，但嵌入不是一个孩子，而是“孤立”范围的兄弟。

（来自源代码）

没有父 <-> 子关系。因此 $broadcast, $emit 将不起作用，因为 $broadcast 需要孩子，而 $emit 需要您认为是兄弟姐妹的父母。

对于这里的问题有很多很好的解释，可能会鼓励您重新考虑控制器的组织方式，以及您如何使用 ng-transclude。如果您想要另一个解决方案，我编写了一个小指令，解决两个指令之间的交互以创建父 <-> 子层次结构。使用风险自负，我希望这会有所帮助！:)

https://gist.github.com/meanJim/1c3339bde5cbeac6417d

Answer 2

您的指令使用ng-transclude. 从文档：

在典型的设置中，小部件创建了一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。

这是您的范围层次结构的样子：

• 003 是指令的隔离范围one
• 004是two元素所在的嵌入范围
• 005是第一个指令的范围two
• 006是第一个指令的包含范围two

如您所见，范围two不是 的子范围one。

Answer 3

这是因为您为指令提供了隔离范围。如果您希望它具有包含父元素的嵌套范围，请从指令中删除范围参数。或者，您可以在范围上定义要传递给指令范围的父范围的属性和值。

http://plnkr.co/edit/aMEpo5zZ76rfMj7Khnoy?p=preview

Answer 4

如果范围FirstCtrl是范围的父级SecondCtrl，则应在以下范围内使用$broadcast方法FirstCtrl：

'use strict';
angular.module('myAppControllers', [])
  .controller('FirstCtrl', function ($scope) {
    $scope.$broadcast('UPDATE_CHILD');
  })
  .controller('SecondCtrl', function ($scope) {
    $scope.$on('UPDATE_CHILD', function() {
      // do something useful here;
    });
  });

如果范围之间没有父/子关系，则应将 $rootScope注入 FirstCtrl 并将事件广播到其他控制器（包括 SecondCtrl）及其相应的（在这种情况下为子）$scope：

'use strict';
angular.module('myAppControllers', [])
  .controller('FirstCtrl', function ($rootScope) {
    $rootScope.$broadcast('UPDATE_ALL');
  });