AngularJS:从隔离范围发送事件

Question

我想要一组可重用的小部件，可以在应用程序的任何地方使用。对于前。我想要一个设置菜单和定义为嵌套自定义标签的菜单项。我希望能够将事件从菜单项或菜单发送到父上下文(父指令中的 Controller 或其他)。

但是我发现了一些有范围的奇怪的事情(也许我误解了一些东西):

<panel title="clock">
    <clock timezone="MST"></clock>
    <clock timezone="MST"></clock>
    <clock timezone="MST"></clock>
</panel>

以下示例在单击项目时不会向父指令 Controller 触发事件​​: http://jsfiddle.net/9VTfR/2/ .

但以下效果很好: http://jsfiddle.net/9VTfR/3/ .

此外，我在两个选项的控制台中都遇到了一些奇怪的 JS 错误。

那么是否可以捕获任何级别的事件，因为父指令也应该是父范围(不仅仅是父 Controller )，不是吗？任何帮助将不胜感激。

Answer 1

您在控制台中看到的错误是因为您的 fiddle 中包含了两次 Angular(一次在外部资源中；一次在框架和扩展中)。

您的 $scope.$on('clickObject') 未触发的原因是您的两个指令都是同级指令，并且 $emit 仅向上通知

From the docs :

Dispatches an event name upwards through the scope hierarchy notifying the registered listeners.

您可以使用 $scope.$parent ( like this )，但这会对您的指令的结构做出一些假设。您还可以使用 $rootScope ( like this )，如果您不使用足够唯一的事件名称，则极有可能会遇到冲突。