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事件，$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()方法取代，所以它的用途是已经气馁了。

AngularJS：取消订阅活动

1 个答案: