Question

我有一个列表列表，我试图为每个列表制作详细信息（个人）视图。我已成功更改URL 和从工厂检索对象，但该对象从未进入控制器/视图。当我点击链接获取详细信息时，视图会发生变化，但$ scope.list未定义。我做错了什么？

配置：

据我所知，错误是我在做决心的方式，但这是我尝试过的唯一没有引发错误

    .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('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('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

我可以看到这里有一些问题。

您没有从lists.getAll()或lists.getList()返回承诺。在没有返回承诺的情况下，UI路由器不知道在调用控制器之前等待承诺得到解决。要解决此问题，请在return之前设置$http。
直接在id中调用网址lists.getList()可能是错误的，因为它会导致对只是一个数字的网址的请求，而不是其他任何内容。它也是一个相对的URL，你可能不想要它。
resolve map / object中的键实际上只是该控制器的 local 依赖项的名称，因此您应该将其作为控制器中的显式依赖项。它的价值将是承诺所解决的任何东西。

要修复最后一个，请将ListCtrl更改为：

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

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

1 个答案: