Angular 1 Ui-router状态间URL参数数据留存方案咨询

我太懂这种无奈了——Angular 2+的queryParamsHandling:'preserve'用起来确实爽，但在Angular 1搭配UI-Router的老项目里，只能自己动手实现类似效果。下面给你几个经过项目验证的靠谱方案，按需选用：

方案1：自定义ui-sref-preserve指令 #

原生ui-sref不会自动帮你带参数，那我们就封装一个增强版指令，让它跳转时自动带上当前URL的查询参数。

angular.module('yourApp')
.directive('uiSrefPreserve', ['$state', '$location', function($state, $location) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // 拿到当前URL的所有查询参数
      const currentQueryParams = $location.search();
      // 解析指令里的目标状态和传入参数
      const stateParts = attrs.uiSrefPreserve.split('(');
      const targetState = stateParts[0].trim();
      const customParams = stateParts.length > 1 ? scope.$eval(stateParts[1].slice(0, -1)) : {};
      
      // 合并参数：自定义参数会覆盖同名的现有参数
      const mergedParams = angular.extend({}, currentQueryParams, customParams);
      
      // 绑定点击跳转逻辑
      element.on('click', function(e) {
        e.preventDefault();
        $state.go(targetState, mergedParams);
      });
      
      // 顺便更新href属性，支持右键新开标签页
      const stateHref = $state.href(targetState, mergedParams);
      element.attr('href', stateHref);
    }
  };
}]);

用法和原生ui-sref几乎一样，只是把指令名换掉：

<a ui-sref-preserve="user.profile({tab: 'settings'})">跳转到用户设置页并保留参数</a>

方案2：全局自动保留参数（利用$stateChangeStart钩子） #

如果想让整个应用的状态切换都自动保留查询参数，不用每次都手动处理，可以用UI-Router的全局钩子来拦截状态切换，自动合并参数。

angular.module('yourApp')
.run(['$rootScope', '$location', function($rootScope, $location) {
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
    // 获取当前的查询参数
    const currentParams = $location.search();
    
    // 把现有参数合并到目标参数里（只保留目标参数没有的项）
    angular.forEach(currentParams, (value, key) => {
      if (angular.isUndefined(toParams[key])) {
        toParams[key] = value;
      }
    });
  });
}]);

要是有个别状态不需要保留参数，加个判断就行：

// 排除login状态不自动保留参数
if (toState.name !== 'auth.login') {
  // 执行合并逻辑
}

方案3：手动合并参数（适合特定场景） #

如果只是某些特定跳转需要保留参数，最直接的方式就是在调用$state.go时手动把当前参数合并进去。

// 在控制器里定义跳转方法
$scope.navigateToDashboard = function() {
  // 获取当前URL参数
  const currentQueryParams = $location.search();
  // 定义跳转需要的新参数
  const dashboardParams = {
    view: 'grid'
  };
  // 合并参数
  const finalParams = angular.extend({}, currentQueryParams, dashboardParams);
  
  $state.go('app.dashboard', finalParams);
};

模板里直接调用：

<button ng-click="navigateToDashboard()">跳转到仪表盘</button>

小提醒 #

• 要区分URL查询参数（$location.search()获取）和UI-Router状态参数（$state.params），根据你的实际需求选择要合并的对象。
• 如果有某个参数不需要保留，合并前手动删掉就行：delete currentQueryParams.tempParam;

内容的提问来源于stack exchange，提问作者Mikko Lasso