使用 resolve to "select" 对象列表中的单个对象

Question

我正在尝试找出 "resolve" 给定基于 Angular UI 的路由路径的对象列表的单个对象模型的最佳方法。

例如，我有一个在 /users 实例化的父视图状态，其中包含一个用户列表。当我 select 一个用户时，我希望子视图解析 selected 用户。子视图的路由就像 /users/:userId 我希望子视图基本上是 "wait" 以便父视图获取所有用户，然后继续实例化子控制器并与 ID 相等的用户一起查看到 userId 中的 $stateParams。我知道这一定是一个典型的用例，但找不到任何其他示例。

Answer 1

这实际上很容易做到，只需使用您父状态中先前解析的用户对象，然后使用它来解析您子状态中的新承诺：

状态：

$stateProvider.state('users', {
  'url': '/users',
  'controller': 'usersController',
  'templateUrl': 'users.html',
  'resolve': {
    'users': [
      '$http',
      function ($http) {
        return $http.get('users.json');
      }
    ]
  }
});

$stateProvider.state('user', {
  'parent': 'users',
  'url': '/:id',
  'controller': 'userController',
  'templateUrl': 'user.html',
  'resolve': {
    'user': [
      '$q',
      '$stateParams',
      'users',
      function ($q, $stateParams, users) {
        var deferred = $q.defer();
        users.data.forEach(function (user) {
          if ($stateParams.id == user.id) {
            deferred.resolve(user);
          }
        });
        return deferred.promise;
      }
    ]
  }
});

控制器：

angular.module('app').controller('usersController', [
  '$scope',
  'users',
  function ($scope, users) {
    $scope.users = users.data;
  }
]);

angular.module('app').controller('userController', [
  '$scope',
  'user',
  function ($scope, user) {
    $scope.user = user;
  }
]);

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/sKkLdnWkjdilsQ3IvU6i?p=preview

使用 resolve to "select" 对象列表中的单个对象

Using resolve to "select" a single object out of a list of object

angularjs

angular-ui-router