AngularJS 指令内的事件处理程序未触发/参数化事件名称

Question

我记下了 this jsFiddle 以复制我的场景。我基本上是通过我页面上 <div> 中的 ui-router 加载此视图，以及使用 $state.go 加载它的指令。指令的控制器应该正在侦听名为 myEvent:<scope.$id> 的事件（例如，在 fiddle 中是 myEvent:2），而外部视图 should 只触发该事件，因为它加载了正确的 $stateParams.scopeId（从各自的 $scope.ev 属性可以看出）。此外，我使用 $scope.$emit 因为我收集到，从外部视图具有更高 $scope.$id 的事实来看，事件应该向上传播并最终到达指令的范围并被捕获，或者我是遗漏了什么？干杯。

更新： 我设法通过添加以下内容让它工作：

.controller("MyCtrl", ["$scope", function($scope) {
    $scope.$root.$on("myEvent:2", function(e, data) {
        $scope.$broadcast("myEvent:2", data);
    });
}])

（参见 fiddle），因为我认为外部视图的 scope 可能不是指令的 scope 的子项；相反，它们有一个共同的祖先，当然 $rootScope 就可以了。所以我 $emit 将事件一直调整到 $rootScope 并 $broadcast 向下调整。现在的问题是我不得不对事件名称进行硬编码，这是一个主要的交易破坏者，因为我事先不知道该指令的 scope.$id;有没有办法使用参数化或基于正则表达式的事件名称，例如：

.controller("MyCtrl", ["$scope", function($scope) {
    $scope.$root.$on("myEvent:(\d+)", function(e, data) {
        $scope.$broadcast("myEvent:" + RegExp., data);
    });
}])

?

Answer 1

知道了：fiddle。技巧是从视图 $emit 一个通用事件，并将正确的 $scope.$id 传递到事件数据中。在 $rootScope 上，提取 id 并用于形成正确的事件名称以进行重新传播。

AngularJS 指令内的事件处理程序未触发/参数化事件名称

AngularJS event handler inside directive not firing / parametric event name

javascript

event-handling

angularjs

angularjs-directive