AngularJs - 为什么我的弹出窗口中的 $emit 方法不起作用
AngularJs - 为什么我的弹出窗口中的 $emit 方法不起作用
我正在使用bootstrap弹出模态窗口，并尝试$emit一个事件，但由于某种原因主页面没有检测到该事件。这是一个相当简单的设置，但我无法弄清楚原因。从我查看Batarang时可以看出，弹出窗口似乎是主应用程序作用域的子作用域，所以我认为它应该可以工作，但实际上并不是这样。在这个简单的应用程序中，当你在弹出窗口中按下“确定”按钮时，它应该在父作用域中设置一个值。这是一个plunker链接：\n//这是在子作用域（工厂）中调用$emit的代码：\nvar modalInstance = $modal.open({\n templateUrl: \'popupMyWindow.html\',\n pScope: parentScope,\n controller: \n function($scope, $modalInstance){\n $scope.ok = function () {\n $scope.$emit(\'ModalSelect\', \'hello world\');\n $modalInstance.close(null);\n }\n },\n//这是在主控制器中调用$on的代码：\n $scope.$on(\'ModalSelect\', function (event, selected) {\n console.log(\'ModalSelect调用成功\');\n $scope.selectedValue = selected;\n });\n谢谢！
问题出现的原因是在一个弹出窗口中使用$emit方法时，事件无法传递给父级作用域。这是因为在$modal指令的作用域中调用了$emit方法，而该作用域可能是一个隔离作用域，所以事件无法传递给父级作用域。
解决方法有两种：
1. 使用$rootScope的$broadcast方法发送事件：
$scope.$root.$broadcast('ModalSelect', 'hello world');
但这种做法是不好的，首先是性能问题，$rootScope会向应用程序中的所有子作用域发送事件，无论它们是否在监听。其次，这样会创建对$rootScope的依赖，降低了可重用性。
2. 使用父级作用域的$emit方法发送事件：
parentScope.$emit('ModalSelect', 'hello world');
这种做法更好，因为$emit方法会向上层作用域冒泡传递事件，只有$rootScope.$on监听器会接收到事件。此外，$emit方法的性能问题已经得到解决，只有实际的监听器才会收到通知。
可以通过使用父级作用域的$emit方法来解决在弹出窗口中使用$emit方法无法传递事件给父级作用域的问题。这样可以避免对$rootScope的依赖，提高性能和可重用性。