$从服务发射或$广播事件和一个控制器（或几个）听他们 [英] $emit or $broadcast events from service and listen them in a controller (or several)
问题描述
我有codeD一个简单的例子，我想发射/广播从服务的事件，我想通过控制器来听取并更改UI该事件，但我不能让它工作和调试的code将其似乎停止在听者，但它不执行该功能。
http://plnkr.co/edit/eglcq7zELLfKp86DYzOe?p=$p$ PVIEW
的服务：的
angular.module（'ServiceModule'，[]）。
服务（'servicetest'，['$ rootScope'，函数（$ rootScope）{
this.test =功能（）{
。$ rootScope $发射（'testevent'）;
};
}]）;
的控制器的
angular.module（'ControllerModule'，['ServiceModule']）。
控制器（'ControllerTest'，['$范围，$ rootScope'，'servicetest'，函数（$范围，$ rootScope，servicetest）{
$ scope.name ='世界';
servicetest.test（）;
$ rootScope。在$（'testevent'，函数（）{
$ scope.name ='乔';
}）;
}]）;
的首页的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=ControllerModule＆GT; ＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述;脚本数据需要=angular.js@1.2.xSRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js数据semver = 1.2.16＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =controller.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =service.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;机身NG控制器=ControllerTest＆GT;
＆LT; P＆GT;您好{{名}}＆LT;！/ P＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
解决方案：
正如ivarni或沃尔特品牌报告，呼叫到触发事件的服务功能必须被放置在听众后，如果不是你正在引发不具有能够收听又一个侦听的事件。
我们只需要更改控制器如下：
的服务的
angular.module（'ControllerModule'，['ServiceModule']）。
控制器（'ControllerTest'，['$范围，$ rootScope'，'servicetest'，函数（$范围，$ rootScope，servicetest）{
$ scope.name ='世界';
$ rootScope。在$（'testevent'，函数（）{
$ scope.name ='乔';
}）;
servicetest.test（）;
}]）;
您正在触发事件，你已经把它贴在听者面前。
试试这个：
$ rootScope。在（'testevent'$，函数（）{
$ scope.name ='乔';
}）;
servicetest.test（）;
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
service:
angular.module('ServiceModule', []).
service('servicetest', ['$rootScope', function($rootScope){
this.test = function(){
$rootScope.$emit('testevent');
};
}]);
controller
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';
});
}]);
index
<!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>
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:
service
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.
Try this:
$rootScope.$on('testevent', function(){
$scope.name = 'Joe';
});
servicetest.test();
这篇关于$从服务发射或$广播事件和一个控制器（或几个）听他们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
