快速连续点击导致Ionic v1应用路由问题，求解决方案

这种快速连续点击导致重复导航的问题在单页应用里挺常见的，不用加载模态也能搞定，给你两个实用的方案：

方案一：控制器内直接维护导航锁（简单快速） #

核心思路是在列表页面的控制器里维护一个「是否正在导航」的状态变量，每次点击前先判断状态，避免重复触发跳转逻辑。

实现代码 #

angular.module('myApp').controller('ProjectListCtrl', function($scope, $state) {
  // 标记当前是否正在执行导航操作
  $scope.isNavigating = false;

  $scope.goToProjectDetail = function(projectId) {
    // 如果正在导航，直接终止当前点击逻辑
    if ($scope.isNavigating) return;

    $scope.isNavigating = true;
    // 跳转到详情页，用finally确保无论导航成功/失败都解锁
    $state.go('project-detail', { id: projectId }).finally(function() {
      $scope.isNavigating = false;
    });
  };
});

模板里还可以配合ng-disabled让用户直观感知到不可点击状态：

<ion-item 
  ng-repeat="project in projects" 
  ng-click="goToProjectDetail(project.id)" 
  ng-disabled="isNavigating"
>
  {{project.name}}
</ion-item>

方案二：全局导航守卫服务（适合多页面复用） #

如果你的应用多个页面都存在类似问题，可以把导航锁封装成全局服务，方便在各处调用：

1. 创建全局守卫服务 #

angular.module('myApp').factory('NavigationGuard', function() {
  let isNavigating = false;

  return {
    // 检查是否允许发起新导航
    canNavigate: () => !isNavigating,
    // 更新导航状态
    setNavigating: (value) => { isNavigating = value; }
  };
});

2. 在控制器中使用服务 #

angular.module('myApp').controller('ProjectListCtrl', function($scope, $state, NavigationGuard) {
  $scope.goToProjectDetail = function(projectId) {
    if (!NavigationGuard.canNavigate()) return;

    NavigationGuard.setNavigating(true);
    $state.go('project-detail', { id: projectId }).finally(function() {
      NavigationGuard.setNavigating(false);
    });
  };
});

补充说明 #

这两种方案完全基于Angular和Ionic自身API实现，和Ionic Native Transitions没有冲突。核心就是通过状态锁避免同一时间触发多次导航请求，既不会打断用户体验，又能彻底解决重复跳转的问题。

内容的提问来源于stack exchange，提问作者Clay Banks