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

您的指令使用ng-transclude。来自文档：

  

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

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

• 003是指令one
的孤立范围
• 004是two元素所在的转换范围
• 005是第一个指令two
的范围
• 006是第一个指令two
的转换范围

因为您可以看到two的范围不是one的子范围。

Answer 2

  

Transclusion创建了一个“隔离”范围，但是这种划分并非如此   孩子，但是'孤立'范围的兄弟。

（源代码）

没有父母＆lt; - ＆gt;孩子的关系。因此$ broadcast，$ emit将无效，因为$ broadcast需要孩子，而$ emit需要你认为是兄弟姐妹的父母。

这里有很多很好的解释，可能会鼓励你重新思考控制器的组织方式，以及你如何使用ng-transclude。如果你想要另一个解决方案，我写了一个小指令，解决了两个指令之间的交互，以创建父＆lt; - ＆gt;子层次结构。使用风险自负，我希望这会有所帮助！ ：）

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

Answer 3

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

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

Answer 4

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

'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');
  });