AngularJS：退訂事件

Question

在我的控制器之一，有一項指令<div keypress-events>訂閱了按鍵：

directives.directive('keypressEvents', ['$document', '$rootScope', function ($document, $rootScope) { 
    return { 
     restrict: 'A', 
     link: function() { 
      $document.bind('keydown', function (e) { 
       $rootScope.$broadcast('keypress', e, e.which); 
      }); 
     } 
    } 
}]); 

還有當用戶按下任何箭頭鍵執行分頁的監聽器。

var listener = $scope.$on('keypress', function (e, a, key) { 
    $scope.$apply(function() { 
     $scope.key = key; 

     if (key == 39) { 
      $scope.currentPage = Math.min($scope.currentPage + 1, $scope.numPages) 
     } else if (key == 37) { 
      $scope.currentPage = Math.max($scope.currentPage - 1, 1) 
     } 
    }); 
}) 

但是，當您導航到另一個控制器然後返回時，偵聽器將被調用兩次。那麼我如何取消訂閱該活動？

我只是試圖摧毀聽者，但這並不工作...

$scope.$on('$destroy', function() { 
    listener(); // remove listener. 
}); 

Answer 1

因爲當你訪問該網頁從指令​​事件被界定的兩倍。你可以做的是，在離開頁面之前注意刪除 ​​事件的指令，對於$destroy事件scope的同一個地方掛鉤。

代碼

directives.directive('keypressEvents', ['$document', '$rootScope', function ($document, $rootScope) { 
    return { 
     restrict: 'A', 
     link: function (scope) { 
      var event = function (e) { 
       $rootScope.$broadcast('keypress', e, e.which); 
      }; 
      $document.on('c', event); 
      scope.$on('$destroy', function(){ 
       angular.element($document).off('keydown', event); 
      }) 
     } 
    } 
}]); 

注意：在jQuery 3.0，.unbind()已被棄用。從jQuery 1.7開始，被.off()方法所取代，所以它的使用是 已經不鼓勵了。