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

因為當您重新訪問頁面時，來自指令的keydown事件被綁定兩次。 您可以做的是，在離開頁面之前，請注意刪除指令的keydown事件，並在scope $destroy事件上使用相同的位置。

碼

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()方法取代，因此不鼓勵使用它。