Restangular 和 UI-Bootstrap 第一页显示为空白

Question

我目前正在掌握 Restangular，并且似乎取得了一些进展。我选择使用 UI-Bootstrap 是为了方便使用，因为我以前习惯使用 bootstrap。

我当前的问题是我的控制器有分页功能，但是当您第一次访问该页面时不会显示结果。如果我访问第二页然后返回到第一页，结果会按预期出现。如果我随后选择重新加载页面，则第一页上的结果不会出现。

我的代码如下：

app.controller('BillsListCtrl', function ($scope, BillRepository) {
  $scope.filteredBills = [],
  $scope.currentPage = 1,
  $scope.itemsPerPage = 10;

  $scope.bills = BillRepository.getList();

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

    $scope.filteredBills = $scope.bills.slice(begin, end);
  });

  console.log($scope.filteredBills);

});

存储库：

app.factory('AbstractRepository', [

  function () {

    function AbstractRepository(restangular, route) {
      this.restangular = restangular;
      this.route = route;
    }

    AbstractRepository.prototype = {
      getList: function (params) {
        return this.restangular.all(this.route).getList(params).$object;
      },
      get: function (id) {
        return this.restangular.one(this.route, id).get();
      },
      getView: function (id) {
        return this.restangular.one(this.route, id).one(this.route + 'view').get();
      },
      update: function (updatedResource) {
        return updatedResource.put().$object;
      },
      create: function (newResource) {
        return this.restangular.all(this.route).post(newResource);
      },
      remove: function (object) {
        return this.restangular.one(this.route, object.id).remove();
      }
    };

    AbstractRepository.extend = function (repository) {
      repository.prototype = Object.create(AbstractRepository.prototype);
      repository.prototype.constructor = repository;
    };

    return AbstractRepository;
  }
]);

设置 BillRepository：

app.factory('BillRepository', ['Restangular', 'AbstractRepository',
  function (restangular, AbstractRepository) {

    function BillRepository() {
      AbstractRepository.call(this, restangular, 'bills');
    }

    AbstractRepository.extend(BillRepository);
    return new BillRepository();
  }
]);

如果您能就此问题提出任何建议，我们将不胜感激！

Answer 1

如果 $scope.filteredBills 是页面上显示的内容，则您仅在更改 currentPage 变量时填充该变量。当您的代码第一次运行时，您设置变量然后在其上设置监视，因此它不会更改并且 filteredBills 不会被设置。

Answer 2

感谢@ErikAGriffin 对此的帮助。

我在我的存储库中进行了更改并删除了 $object，如下所示：

getList: function (params) {
    return this.restangular.all(this.route).getList(params);
},

然后我的控制器变成了下面这样：

app.controller('BillsListCtrl', function ($scope, BillRepository) {
    $scope.filteredBills = [],
    $scope.currentPage = 1,
    $scope.itemsPerPage = 10;

    $scope.bills = BillRepository.getList().$object;

    BillRepository.getList().then(function(data){
        $scope.filteredBills = data.slice(0, $scope.itemsPerPage);
    });

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

        $scope.filteredBills = $scope.bills.slice(begin, end);
    });
});

Restangular 和 UI-Bootstrap 第一页显示为空白

Restangular and UI-Bootstrap first page appears blank

angularjs

angular-ui-bootstrap

restangular