UI路由器无法将已解析的对象注入控制器

Question

I have a list of lists and I'm trying to make a detail (individual) view for each list. I've successfully changed the URL and retrieved the object from the factory but the object never makes it into the controller/view. When I click on the link for the detail the view changes but $scope.list is undefined. What am I doing wrong?

Config :

As far as I can tell the error is in the way I am doing the resolve but this is the only thing I tried that didn't throw an error

    .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider
        .state('lists', {
            url: '/lists',
            templateUrl: 'views/lists.html',
            controller: 'ListsCtrl',
            resolve: {
                listsPromise: ['lists', function (lists){
                    console.log('LISTS State');
                    return lists.getAll();
                }]
            }
        })
        .state('list', {
            url: '/{id}',
            templateUrl: 'views/list.html',
            controller: 'ListCtrl',
            resolve: {
                list: ['$stateParams', 'lists', function($stateParams, lists){
                    return lists.getList($stateParams.id);
                }]
            },
        });

        $urlRouterProvider.otherwise('/lists');

}]);

Factory :

.factory('lists', ['$http', 
    function($http){
        var lists = {
            lists: []
        };

        lists.getAll = function(){
            $http.get('/lists').success(function(res){
                angular.copy(res, lists.lists);
            });
        };

        lists.getList = function(id){
            $http.get(id).then(function(res){
                return res.data;
            });
        };

        return lists;
}]);

Controller(s) :

is it possible to do this with one controller?

.controller('ListsCtrl', ['$scope', '$http', 'ngDialog', 'lists',
    function($scope, $http, lists) {
    console.log("controller loaded");
    $scope.lists = lists.lists;

}])
.controller('ListCtrl', ['$scope', '$http',
    function($scope, $http, list){
        $scope.list = list;
        console.log(list); //returns undefined
}]);

Answer 1

There are a few problems here that I can see.

1. You are not returning a promise from either lists.getAll() or lists.getList() . Without returning a promise, the UI router doesn't know to wait for a promise to be resolved before invoking your controller. To fix it, put a return before the $http call in both.
2. Invoking the URL id directly in lists.getList() is likely wrong, since it will result in a request to a URL that is just a number, nothing else. And it will be a relative URL, too, which you probably don't want.
3. The key in the resolve map/object is actually the name of a local dependency for that controller only, so you should have that as an explicit dependency in your controller. The value of it will be whatever the promise resolves to.

To fix the last one, change your ListCtrl to as follows:

 .controller('ListCtrl', ['$scope', '$http', 'list',
     function($scope, $http, list){
         $scope.list = list;
         console.log(list); //returns the correct thing
  }]);