[英]Listen to window events in an Angularjs service
我想在AngularJS服务中收听窗口事件,以便我可以将它们广播到我的控制器。
我有一个Chrome扩展程序,它使用port.postMessage('Any Message');
发送任何消息port.postMessage('Any Message');
。
我希望我的angularjs服务能够收听该消息并使用$rootScope.$broadcast("Something occurred.");
将其发送到控制器$rootScope.$broadcast("Something occurred.");
在我的服务中,我正在尝试使用以下监听器。
window.addEventListener('Any Message', function (event) {
if (event.origin != window.location.origin) {
return;
}
$rootScope.$broadcast("Something occurred.");
});
我也试过$window
但我不知道为什么上面的代码不起作用。 我的IDE,jetbrains webstorms也将上面的代码片段归类为无法访问。
在此之前,我在控制器中使用了上面的代码,它工作正常。 我没有在控制器中做广播。 现在我想将其移至服务中,以便所有控制器都能够从服务中收听它。
这是我做过的工作示例 - 订阅DOM事件并将事件从服务广播到控制器: http : //plnkr.co/edit/nk2aPt?p = preview
//this is service that creates subscription
app.service('serviceName', function($window, $rootScope) {
function subsFunc() {
$window.addEventListener('click', function(e) {
$rootScope.$broadcast('app.clickEvent', e);
})
}
return {
"subscribeMe": subsFunc }
});
//this will be in controller
$rootScope.$on('app.clickEvent', function(a, b) {
//a,b - event object details
});
这样的事情可能会有所帮助:
var app = angular.module('app', []);
app.run(["$window", "$rootScope", function($window, $rootScope) {
$window.addEventListener('message', function(e) {
$rootScope.$broadcast('message', e.data);
});
} ]);
你在某处注入了这项服务吗? 服务只有在您真正注入它们时才会运行。
另外,最好使用$ window而不是window,这样你就可以在测试中稍后进行模拟。
问题 :
"$window listener" listen multiple time.
示例 :
考虑一下,我们在Page B中编写了一个监听器代码。 我的起始页是第A页 。
我在页面B的监听器代码中添加了一个警报。
$window.addEventListener('message', function (e) { alert() });
我们走吧,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.