AngularJS UI-router：如何从视图传参至state resolve并预加载数据？

没问题，我帮你把这段逻辑迁移到路由的resolve中，确保数据加载完成后再渲染页面。下面是具体的实现步骤：

1. 配置你的路由（State） #

首先需要在$stateProvider的配置里，给reservation这个state添加resolve属性。在resolve中，我们可以通过$stateParams获取ui-sref传递过来的参数，然后发起HTTP请求预加载数据。

angular.module('yourApp').config(function($stateProvider) {
  $stateProvider.state('reservation', {
    url: '/reservation?check_in&check_out', // 定义参数在URL中的格式，可选但推荐配置
    templateUrl: 'path/to/reservation-view.html',
    controller: 'ReservationController',
    resolve: {
      // 定义预加载的依赖，名字可以自定义，比如叫filteredRooms
      filteredRooms: function($http, $stateParams) {
        // 通过$stateParams拿到ui-sref传递的check_in和check_out参数
        return $http.get('server/getFilteredRooms.php', {
          params: {
            check_in: $stateParams.check_in,
            check_out: $stateParams.check_out
          }
        }).then(function(res) {
          // 返回请求到的数据，后续会直接注入到控制器中
          return res.data;
        });
      }
    }
  });
});

2. 视图中的ui-sref保持不变 #

你原来的视图代码不需要修改，ui-sref已经正确完成了参数传递：

<a ui-sref="reservation({check_in: check_in, check_out: check_out})">查看可预订房间</a>

这里的check_in和check_out是当前视图作用域中的变量，会被自动解析并传递到目标state。

3. 修改控制器接收resolve预加载的数据 #

现在控制器不需要自己发起HTTP请求了，只需要把resolve中定义的filteredRooms作为依赖注入进来，直接使用即可：

angular.module('yourApp').controller('ReservationController', function($scope, filteredRooms) {
  // filteredRooms就是resolve中已经加载完成的数据
  $scope.rooms = filteredRooms;
  // 后续业务逻辑直接基于这个数据处理，不用再处理异步回调
});

关键注意点 #

• $stateParams是AngularUI Router提供的服务，专门用于获取当前state的参数，包括通过ui-sref传递的参数。
• resolve中的每个函数都会返回一个Promise（$http请求本身就返回Promise），路由会等待所有resolve的Promise都完成后，才会渲染视图并实例化控制器。
• 如果resolve中的请求失败，你可以在then中添加错误处理，或者在路由的onError钩子中统一处理，避免页面渲染出错误状态。

这样就完成了从控制器直接请求数据到用resolve预加载数据的迁移，确保页面渲染时数据已经准备就绪啦！

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