来自服务的 $emit 或 $broadcast 事件并在控制器(或多个)中监听它们 [英] $emit or $broadcast events from service and listen them in a controller (or several)
问题描述
我编写了一个简单的例子，我想从服务发出/广播一个事件，我希望控制器监听该事件并更改 UI，但我无法让它工作并调试它的代码似乎停在侦听器中，但不执行该函数.
I have coded a simple example where I want to emit/broadcast an event from a service and I want that event to be listened by a controller and change the UI, but I can't make it work and debugging the code it seems to stop in the listener but it doesn't execute the function.
http://plnkr.co/edit/eglcq7zELLfKp86DYzOe?p=preview
服务:
angular.module('ServiceModule', []).
service('servicetest', ['$rootScope', function($rootScope){
this.test = function(){
$rootScope.$emit('testevent');
};
}]);
控制器
angular.module('ControllerModule', ['ServiceModule']).
controller('ControllerTest', ['$scope','$rootScope','servicetest', function($scope, $rootScope, servicetest){
$scope.name = 'World';
servicetest.test();
$rootScope.$on('testevent', function(){
$scope.name = 'Joe';
});
}]);
索引
<!DOCTYPE html>
<html ng-app="ControllerModule">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="controller.js"></script>
<script src="service.js"></script>
</head>
<body ng-controller="ControllerTest">
<p>Hello {{name}}!</p>
</body>
</html>
解决方案:
正如 ivarni 或 Walter 品牌所报告的那样，对触发事件的服务函数的调用必须放在侦听器之后，否则您将触发一个尚无侦听器能够侦听的事件.
Solution:
As ivarni or Walter brand reported, the call to the service function which triggers the event has to be placed after the listener, if not you are triggering an event which doesn't have a listener able to listen yet.
我们只需要改变控制器如下:
We need just to change the controller as follows:
服务
angular.module('ControllerModule', ['ServiceModule']).
controller('ControllerTest', ['$scope','$rootScope','servicetest', function($scope, $rootScope, servicetest){
$scope.name = 'World';
$rootScope.$on('testevent', function(){
$scope.name = 'Joe';
});
servicetest.test();
}]);
推荐答案
您在附加侦听器之前触发了事件.
You're triggering the event before you've attached the listener.
试试这个:
$rootScope.$on('testevent', function(){
$scope.name = 'Joe';
});
servicetest.test();
这篇关于来自服务的 $emit 或 $broadcast 事件并在控制器(或多个)中监听它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
