在Angularjs服務中收聽窗口事件

我想收聽我的AngularJS服務中的窗口事件，以便將它們廣播到我的控制器。在Angularjs服務中收聽窗口事件

我有一個Chrome擴展，它使用port.postMessage('Any Message');發送任何消息。

我希望我的angularjs服務收聽該消息，並將其發送給使用$rootScope.$broadcast("Something occurred.");

裏面我的服務，我想用下面的聽衆這樣做控制器。我也試過$window但我不知道爲什麼上面的代碼不起作用。此外，我的IDE，jetbrains webstorms將上面的代碼片段分類爲無法訪問。

在此之前，我在控制器中使用了上述代碼，它工作正常。我沒有在控制器上播放。現在我想將其轉移到服務中，以便所有控制器都能夠從服務中收聽。

2015-02-07 Sojharo Mangi

這裏工作的例子，我做了 - 與訂閱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 
    });

來源

2015-02-07 14:42:10 shershen

謝謝，它工作。 – 2015-02-09 14:12:11

您是否在某處注入了該服務？服務只有在真正注入它們的情況下才會運行。

此外，最好使用$ window而不是window，所以你可以稍後在你的測試中模擬它。

來源

2015-02-07 14:28:51 AdirAmsalem

是的，我注射了。爲什麼我的IDE將它分類爲無法訪問？ – 2015-02-07 14:32:52

不知道。我還建議檢查是否需要手動調用$ digest/$ apply，因爲它可能會在AngularJS之外觸發。無論如何，如果它不起作用 - 上傳一個重現此操作的plunker/jsfiddle，這樣可以更容易地爲您提供幫助。 – AdirAmsalem 2015-02-07 14:42:51

像這樣的東西可能會有所幫助：

var app = angular.module('app', []); 

app.run(["$window", "$rootScope", function($window, $rootScope) { 

    $window.addEventListener('message', function(e) { 

     $rootScope.$broadcast('message', e.data); 
    }); 
} ]);

來源

2015-07-18 14:56:56 Rian

問題：

"$window listener" listen multiple time.

示例：

考慮一下，我們在Page B中寫了一個聽衆代碼。我的首頁是Page A。

我在Page B中增加了一個提醒。

$window.addEventListener('message', function (e) { alert() });

放開，

頁A >> B頁（警報計數1）網頁B >>頁A >> B頁（警報計數2）頁B >>網頁A> > B頁（警戒計數3）

來源

2017-02-27 06:40:55

在Angularjs服務中收聽窗口事件

回答

相關問題