AngularJS分页控制器事件竞态问题的解决方法咨询

嘿，这个问题我在AngularJS 1.x项目里遇到过好几次，本质是控制器实例销毁时没清理绑定的全局事件，或者活跃状态的判断逻辑有漏洞。给你几个靠谱的解决方案：

你遇到的竞态问题很大概率是因为旧控制器绑定的快捷键事件（比如keydown）没有被移除，即使控制器对应的视图已经被销毁，事件监听器还挂在document/window上，导致所有旧实例都会响应快捷键。

解决办法是利用AngularJS的$destroy生命周期钩子，在控制器销毁时主动解绑事件：

app.controller('PaginationCtrl', function($scope, $document) {
  // 定义快捷键处理函数
  const handleKeydown = (e) => {
    // 这里保留你原来的活跃判断逻辑
    if (e.keyCode === 39 && $scope.isCurrentActiveView) {
      $scope.movePage('next');
      $scope.$apply(); // 因为事件是在Angular上下文外触发的，需要手动触发digest
    }
  };

  // 绑定全局事件
  $document.on('keydown', handleKeydown);

  // 控制器销毁时解绑事件，避免内存泄漏和重复触发
  $scope.$on('$destroy', () => {
    $document.off('keydown', handleKeydown);
  });
});

这样每个控制器实例销毁时，对应的事件监听器会被移除，只有当前存在的（且活跃的）控制器会响应快捷键。

如果你的活跃状态判断逻辑不够精准，可以结合路由/视图的激活状态来做判断：

• 如果你用ngRoute：可以通过$route服务获取当前路由，对比分页组件所在的路由是否匹配，同时校验当前页码参数
• 如果你用ui-router：可以通过$state服务判断当前状态是否为分页组件所在的状态，再匹配页码参数

举个ui-router的例子：

app.controller('PaginationCtrl', function($scope, $state) {
  $scope.isActive = () => {
    // 假设分页组件属于`app.list`状态，且页码参数为`page`
    return $state.current.name === 'app.list' && $state.params.page === $scope.currentPage;
  };

  const handleKeydown = (e) => {
    if (e.keyCode === 39 && $scope.isActive()) {
      $scope.movePage('next');
      $scope.$apply();
    }
  };

  // 同样不要忘记绑定和解绑事件
  $document.on('keydown', handleKeydown);
  $scope.$on('$destroy', () => $document.off('keydown', handleKeydown));
});

这种方式能确保只有当前路由下的分页控制器才会响应快捷键。

更优雅的方式是把快捷键逻辑抽离到单例服务中（AngularJS服务默认是单例），让服务只跟踪当前活跃的分页组件，避免多个控制器各自绑定事件：

app.service('PaginationShortcutService', function($document, $rootScope) {
  let activePaginator = null;

  // 对外暴露设置活跃分页器的方法
  this.setActive = (paginator) => {
    activePaginator = paginator;
  };

  // 服务初始化时绑定一次全局事件
  $document.on('keydown', (e) => {
    if (e.keyCode === 39 && activePaginator) {
      // 用$rootScope.$apply确保Angular上下文更新
      $rootScope.$apply(() => {
        activePaginator.movePage('next');
      });
    }
  });
});

// 在分页控制器中注册活跃状态
app.controller('PaginationCtrl', function($scope, PaginationShortcutService) {
  // 监听视图是否激活（比如ng-show/ng-if的状态）
  $scope.$watch('isViewVisible', (isVisible) => {
    if (isVisible) {
      // 把当前分页的movePage方法注册到服务中
      PaginationShortcutService.setActive({
        movePage: (dir) => $scope.movePage(dir)
      });
    }
  });

  // 控制器销毁时清空活跃状态（可选，新的活跃实例会自动覆盖旧的）
  $scope.$on('$destroy', () => {
    PaginationShortcutService.setActive(null);
  });
});

这种方式从根源上避免了多个控制器响应事件的问题，所有快捷键逻辑都由单例服务统一处理，只对当前活跃的分页组件生效。

内容的提问来源于stack exchange，提问作者roza pr