Question

我正在努力找出解决问题的最佳方法。给定基于Angular UI的路径路径的对象列表的单个对象模型。

例如，我有/users实例化的父视图状态，其中包含用户列表。当我选择用户时，我希望子视图解析所选用户。子视图的路由类似于/users/:userId，我希望子视图基本上是等待＆＃34;等待＆＃34;要获取所有用户的父视图，然后继续实例化子控制器并使用userId中ID等于$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

使用解决方案＆＃34;选择＆＃34;对象列表中的单个对象

1 个答案: