Angular 1.4 UI Router返回时如何保留上一状态数据？

其实你完全不需要使用嵌套状态就能实现这个需求！嵌套状态更适合视图层级嵌套的场景（比如父视图包含侧边栏，子视图替换主内容区域），而你的场景是两个独立页面的状态切换，核心要解决的是数据持久化和状态恢复的问题，和视图嵌套无关。

具体实现方案（无需嵌套状态） #

核心思路是把搜索关键词、用户列表数据存在全局单例服务中，避免控制器销毁时丢失数据：

• 创建一个UserDataService服务，用来存储搜索关键词和用户列表：

  angular.module('yourApp').service('UserDataService', function($http) {
    this.searchKeyword = '';
    this.userList = [];
    
    // 封装获取用户列表的方法，同步保存数据到服务
    this.getUsers = function(keyword) {
      return $http.get('/api/users', { params: { keyword: keyword } })
        .then(response => {
          this.searchKeyword = keyword;
          this.userList = response.data;
          return response.data;
        });
    };
  });
  

• 在UserMgmtCtrl中，初始化时优先读取服务中的已存数据：

  angular.module('yourApp').controller('UserMgmtCtrl', function(UserDataService) {
    const vm = this;
    
    // 初始化时先检查服务是否有保存的历史数据
    if (UserDataService.userList.length > 0) {
      vm.searchKeyword = UserDataService.searchKeyword;
      vm.userList = UserDataService.userList;
    } else {
      // 无历史数据时，请求默认用户列表
      UserDataService.getUsers('').then(data => {
        vm.userList = data;
      });
    }
    
    // 搜索触发方法，调用服务同步数据
    vm.searchUsers = function(keyword) {
      UserDataService.getUsers(keyword).then(data => {
        vm.userList = data;
      });
    };
  });
  

• 当你从userDetail状态返回userManagement状态时，控制器会直接读取服务中保存的搜索关键词和用户列表，无需重新发起XHR请求，就能恢复之前的搜索结果页面。

关于嵌套状态的补充 #

如果硬要用嵌套状态实现，也不是不行，但完全没必要——嵌套状态会让两个视图共存于同一个页面（比如用户列表和详情在同一页面展示），这和你需求里的“两个独立页面”不符，反而会增加不必要的视图层级复杂度。

内容的提问来源于stack exchange，提问作者Prakash Mariappan