AngularJS中的承诺和分页

Question

我有一个我要ng-repeat结束的事件列表。 我还使用UI-Bootstrap从这些事件创建分页。 当我将事件数据硬编码到我的控制器中时，我能够显示并翻转它们没有问题。 但是，当我尝试使用Promise从服务中获取数据时，我的代码中断了。 我有一种感觉是因为我没有正确地写出我的承诺（我是他们的新手），所以当页面加载时，数据还没有返回。

这是我的控制器：

App.controller("EventsController", ['$scope', 'EventsService',       function($scope, EventsService) {
  $scope.events = [];
  $scope.itemsPerPage = 5; //items to show per page
  $scope.currentPage = 1;  //what page to start on

  EventsService.getEvents()
    .then(function(data) {
      $scope.events = data;
    }, function(error) {
     console.log(error);
  });

  $scope.totalItems = $scope.events.length;

 //determines total # of pages
 $scope.pageCount = function () {
  return Math.ceil($scope.events.length / $scope.itemsPerPage);
 };

$scope.$watch('currentPage + itemsPerPage', function() {
  var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
  end = begin + $scope.itemsPerPage;
  $scope.filteredEvents = $scope.events.slice(begin, end);
  });
}]);

而我的服务：

App.factory("EventsService", function($http) {
  return {
    getEvents : function() {
      return $http.get("/../../../test_event_data.json")
      .then(function(response) {
        if(typeof response.data === 'object') {
          return response.data;
        } else {
          return $q.reject(response.data);
        }
      }, function(response) {
          return $q.reject(response.data);
      });
    }
  }
});

我的看法是：

<div class="row">
  <div class="col-lg-2">
    <h3>Filter Results</h3>
    <h3 class="pull-right">All</h3>
    <h3 class="pull-right">Events</h3>
    <h3 class="pull-right">Offerings</h3>
  </div>
 <div class="col-lg-10">
    <h3>Upcoming Events&Offerings</h3>
    <div ng-repeat="event in filteredEvents">
       <h3>{{event.title}}</h3>
       <p>{{event.location}}</p>
       <p>{{event.time}}</p>
       <p>{{event.description}}</p>
    </div>
    <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
 </div>
</div>

最后，我尝试返回的数据样本：

[{"id":1,"title":"massa quis augue luctus tincidunt   nulla","location":"Little Fleur","time":"8:33 AM","description":"rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id","offering":true},
{"id":2,"title":"sapien ut nunc vestibulum ante","location":"Leroy","time":"6:07 PM","description":"vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae","offering":false},
{"id":3,"title":"sagittis nam congue risus semper porta volutpat","location":"Waubesa","time":"4:13 AM","description":"nisi at nibh in hac habitasse platea dictumst aliquam augue","offering":false},
{"id":4,"title":"consequat ut nulla sed","location":"Dahle","time":"2:08 AM","description":"ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus","offering":false}]

Answer 1

解决了：

原来，我需要将逻辑全部放入getEvents函数中。 所以：

EventsService.getEvents()
.then(function(data) {
  $scope.events = data;
  $scope.pageCount = function () {
    return Math.ceil($scope.events.length / $scope.itemsPerPage);
  };
  $scope.totalItems = $scope.events.length;
  $scope.$watch('currentPage + itemsPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
      end = begin + $scope.itemsPerPage;
    $scope.filteredEvents = $scope.events.slice(begin, end);
  });
}, function(error) {
  console.log(error);
});

Answer 2

这也应该达到目的：

App.controller("EventsController", ['$scope', 'EventsService',       function($scope, EventsService) {
$scope.events = [];
$scope.itemsPerPage = 5; //items to show per page
$scope.currentPage = 1;  //what page to start on

EventsService.getEvents()
.then(function(data) {
    angular.forEach(data, function(value){
       $scope.events.push(value);
     });
 }, function(error) {
     console.log(error);
 });

$scope.pageCount = function () {
   return Math.ceil($scope.events.length / $scope.itemsPerPage);
 };