AngularJs广播事件 [英] AngularJs broadcast event
问题描述
我想从javascript函数广播角事件即angular.injector（['NG'，'MyModule的']）获得（mySharedService）prepForBroadcast（'你好'）。
通过使用上述行我可以调用prepForBroadcast（），但我不能在$范围内赶上的事件。在$（）
请注意：我想从JavaScript调用函数prepForBroadcast（）方法
。 ＆LT;！ - index.html的 - ＆GT;
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;！ - 法术 - ＆GT;
＆LT;！ - 通过CDN负载角 - ＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT;风格＆GT;
。题{
边框：1px的固体深灰;
填充：10px的;
保证金底：10px的;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-应用=MyModule的＆GT;
＆LT; DIV ID =APPIDNG控制器=ControllerZero＆GT;
＆LT;输入NG模型=消息＆GT;
＆LT; / DIV＆GT; ＆LT; DIV NG控制器=ControllerOne＆GT;
＆LT;输入NG模型=消息＆GT;
＆LT; / DIV＆GT; ＆LT; DIV NG控制器=ControllerTwo＆GT;
＆LT;输入NG模型=消息＆GT;
＆LT; / DIV＆GT; ＆LT;我组分NG模型=消息＆GT;＆LT; /我-成分＆gt;
＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT;脚本＆GT;
。angular.injector（['NG'，'MyModule的']）获得（mySharedService）prepForBroadcast（'你好'）。
＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
的script.js文件
VAR Mymodule中= angular.module（'Mymodule中'，[]）;
myModule.factory（'mySharedService'，函数（$ rootScope）{
变种sharedService = {}; sharedService.message =''; sharedService。prepForBroadcast =功能（MSG）{
的console.log（'prepForBroadcast'）;
this.message =味精;
this.broadcastItem（）;
}; sharedService.broadcastItem =功能（）{
的console.log（'broadcastItem'）;
$ rootScope $广播（'handleBroadcast'）。
}; 返回sharedService;
}）;myModule.directive（'myComponent的'，函数（mySharedService）{
返回{
限制：'E'，
控制器：函数（$范围，$ ATTRS，mySharedService）{
$范围。在$（'handleBroadcast'，函数（）{
$ scope.message ='指令：'+ mySharedService.message;
}）;
}，
更换：真实，
模板：'＆LT;输入＆GT;'
};
}）;功能ControllerZero（$范围，sharedService）{
$范围。在$（'handleBroadcast'，函数（）{
的console.log（'处理事件'）;
$ scope.message = sharedService.message;
}）;
}功能ControllerOne（$范围，sharedService）{
$范围。在$（'handleBroadcast'，函数（）{
$ scope.message ='ONE：'+ sharedService.message;
}）;
}功能ControllerTwo（$范围，sharedService）{
$范围。在$（'handleBroadcast'，函数（）{
$ scope.message ='二：'+ sharedService.message;
}）;
}。ControllerZero $注射='$范围'，'mySharedService'];。ControllerOne $注射='$范围'，'mySharedService'];。ControllerTwo $注射='$范围'，'mySharedService'];
angular.injector（）创建一个新的喷油器，有了它一个新的 $ rootScope 。本次活动将在播出这一新的 $ rootScope 对你的一个控制器监听来代替。
您需要找回已与应用程序相关的喷油器：
angular.element（一个DOMElement）.injector（）;
您还需要使用手动触发摘要回路数据绑定更新，例如 $适用。
例如：
angular.element（文件）。就绪（函数（）{ VAR元= angular.element（document.querySelector（）'NG-范围。'）;
变种注射器= element.injector（）;
VAR范围= element.scope（）; 范围。$应用（函数（）{
。injector.get（'mySharedService'）prepForBroadcast（'你好'）;
}）;
}）;
演示： http://plnkr.co/编辑/ NDKBdzSmvN1xY7alafir？p = preVIEW
I want to broadcast angular event from javascript function i.e angular.injector(['ng', 'myModule']).get("mySharedService").prepForBroadcast('hello'); By using above line I can invoke prepForBroadcast() but I can't catch event in $scope.$on()
Note: I want to call prepForBroadcast() method from javascript function.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.question{
border:1px solid darkgray;
padding:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div ng-app="myModule">
<div id="appID" ng-controller="ControllerZero">
<input ng-model="message" >
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
<my-component ng-model="message"></my-component>
</div>
</body>
<script>
angular.injector(['ng','myModule']).get("mySharedService").prepForBroadcast('hello');
</script>
</html>
script.js file
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
console.log('prepForBroadcast');
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
console.log('broadcastItem');
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
function ControllerZero($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
console.log('handle event');
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
angular.injector() creates a new injector, and with it a new $rootScope. The event will be broadcasted on this new $rootScope instead of on the one your controllers are listening on.
You need to retrieve the injector already associated with your application:
angular.element(domElement).injector();
You also need to manually trigger the digest loop for the data bindings to update, for example by using $apply.
Example:
angular.element(document).ready(function() {
var element = angular.element(document.querySelector('.ng-scope'));
var injector = element.injector();
var scope = element.scope();
scope.$apply(function() {
injector.get('mySharedService').prepForBroadcast('hello');
});
});
Demo: http://plnkr.co/edit/NDKBdzSmvN1xY7alafir?p=preview
这篇关于AngularJs广播事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
