表中没有填充数据

时间:2016-06-28 02:55:43

标签: javascript angularjs angularjs-scope

我在表格中显示数据时遇到问题。

我正在使用自定义服务从json文件中获取数据,然后将该数据插入到对象的$ rootScope中。

但是当我运行视图时,它变成空白而没有错误。在视图中,我在视图中使用下面的代码行来迭代对象数组“books”

请指导我。

controller.js

Controllers.controller('BookListCtrl_Student', ['$scope','$rootScope','$http','$location','BookData',
function ($scope, $rootScope, $http, $location, BookData) {
    $rootScope.books=[];
    $rootScope.books.push(BookData.getData());
    $scope.bookLists = ['All Books', 'Available Books'];
    $scope.selection = $scope.bookLists[0];

    $scope.backToLogin = function() {
        $location.path("/main");
    }
}    
]);

customservice.js

Controllers.factory('BookData',['$http',function(http){
return {
    getData: function() {
        return http.get('data/books.json').then(function(result){               
            return result.data;               
            });
    }
};
}
]);

1 个答案:

答案 0 :(得分:0)

问题是,当您执行 $ rootScope.books.push(BookData.getData())时,它会调用 getData(),但它永远不会执行promise。要修复它,您需要在控制器中处理承诺并分配数据。

<强> customservice.js

return http.get('data/books.json');

<强> controller.js

BookData.getData().then(function(resp){
   $rootScope.books.push(resp.data);
})

Heres是一名快速举例 - https://plnkr.co/edit/ivdLd9wilmWW8oUnrMsh?p=preview