Angular控制器的生存期和事件處理

Question

如何正確處理Angular控制器中的事件（如$rootScope或套接字事件）？ 我面臨的問題是我的控制器沒有銷毀，這在偵聽特定事件時會引起一些問題。

為了弄清楚我的意思，這是個笨蛋： http ://plnkr.co/edit/CkXKUnpUdsbnZEjq8zLy?p=preview

首先觸發rootscope事件（通過單擊按鈕）可以按預期工作：僅獲取一個事件。 但是導航到Route 2並再次觸發rootscope事件顯示了我的問題。 該事件被提取了兩次，因為（至少這是我的猜測）兩個控制器現在都處於活動狀態。 每個路由切換都會導致一個附加的事件偵聽器。

如何處理呢？

Answer 1

使用$scope.$on而不是$rootScope.$on ，偵聽器將在范圍銷毀時自動銷毀。

Answer 2

JosselinTD給出的答案是正確的。 如果在$ rootScope上廣播了一個事件，則足以監聽您各自控制器的$ scope，因為在所有層次上低於觸發該事件的作用域的所有作用域上都會觸發廣播，而所有其他作用域都位於$ rootScope之下的某個位置。

如果這不是一個選擇，例如，因為您想捕獲一個發出的事件（使用$ emit方法而不是$ broadcast）並且沒有通過您的$ scope，那么您實際上也可以在$ rootScope上偵聽。 但是，在那種情況下，您必須確保在破壞控制器的作用域時清理監聽器：

var removeListener = $rootScope.$on('yourEvent', function(event) {
  // do what you want here..
});
// remove the listener on $rootScope when $scope is cleaned up
// this makes sure we have no unwanted references..
$scope.$on('$destroy', removeListener);

$ on方法返回一個函數，該函數允許刪除由它創建的偵聽器。 當控制器被銷毀時，AngularJS將在$ scope上調用$ destroy事件（例如，因為其視圖已被其他東西替換）。

如果您正在控制器中監聽非角度事件，則還應該使用

$scope.$on('$destroy', function() {
   //TODO: call some clean-up function to remove your event listener
 });

如套接字io偵聽器刪除（stackoverflow）中所述，這可能是偵聽器刪除

另一個有用的提示：如果您正在監聽來自AngularJS上下文之外的事件（這適用於DOM事件，當然也適用於socket.io事件），則必須將它們包裝在$ scope。$中。應用，因為AngularJS否則將不知道事件偵聽器帶來的任何更改。

socket.on('someSocketEvent', function(data) {
  $scope.$apply(function() {
    $scope.dataFromSocket = data;
  });
});