使用 AngularJS 和带有 ng-resource 的 Azure 移动 Web 服务进行分页

Question

我正在使用以下自定义指令进行分页，效果很好： https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

但现在我有 50 多个项目，并且想使用服务器端分页。我的后端是 Azure 移动 Web 服务，但我一直在尝试获取正确的 REST 调用以及如何在 Angular 中使用它来使用我的自定义指令进行分页。

我试图通过我的服务来利用这一点，如下所示：

// All Articles
pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
return $resource('https://myrestcall.net/tables/articles/:articleID?$top=100&$inlinecount=allpages', { articleID: '@id' },
{
    'query': { method: "GET", isArray: false },
    'update': { method: 'PATCH' }
}
);
}]);

我的控制器是（请注意，我删除了投票功能以保持这篇文章的简洁）：

 // Articles for Home Paging Test
pfcControllers.controller('pfcHomeArticlesCtrlTest', ['$scope', 'auth', 'pfcArticles', function ($scope, auth, pfcArticles) {

$scope.articles = [];
$scope.totalArticles = 0;
$scope.articlesPerPage = 50; // this should match however many results your API puts on one page
getResultsPage(1);

$scope.pagination = {
    current: 1
};

$scope.pageChanged = function (newPage) {
    getResultsPage(newPage);
};

function getResultsPage(pageNumber) {
    // Using inlinecount creates two objects of "results" and "count"
   pfcArticles.query(function(data) {
       $scope.articles = data.results;
       $scope.totalArticles = data.count;
    });
}    
}]);

我的 html 如下（请注意，我在这篇文章中从控制器中删除了投票功能以使其更简洁）：

    <div ng-controller="pfcHomeArticlesCtrlTest">
        <table class="table table-striped">
            <tr>
                <th>Votes</th>
                <th>Title</th>
                <th>Category ID</th>
                <th>Link</th>
            </tr>

            <tr dir-paginate="article in articles | itemsPerPage:10 total-items=" totalusers">

                <td>
                    <div class="col-md-1 voting well">
                        <div class="votingButton" ng-click="upVote(articlevote);">
                            <i class="glyphicon glyphicon-chevron-up"></i>
                        </div>
                        <div class="badge badge-inverse">
                            <div>{{article.articlevotes}}</div>
                        </div>
                        <div class="votingButton" ng-click="downVote(articlevote);">
                            <i class="glyphicon glyphicon-chevron-down"></i>
                        </div>
                    </div>
                </td>
                <td>{{article.articletitle}}</td>
                <td>{{article.articlecategoryid}}</td>
                <td><a ng-href="#article/{{article.id}}/{{article.articlelink}}">{{article.articletitle}}</a></td>
            </tr>
        </table>
        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
    </div>

我收到的错误如下：

angular.min.js:101 错误：[$parse:syntax] http://errors.angularjs.org/1.3.4/$parse/syntax? p0=total&p1=is%20an%20unexpected%20token&p2=33&p3=articles%20%7CNaNtemsPerPage%3A10%20total-items%3Dtotalusers&p4=total-items%3Dtotalusers 在错误（本机）

它似乎引用了“totalusers”，但我的控制器有“totalArticles”

自定义指令有一个使用 $http 的服务器端分页示例，但我使用的是 ng-resource（上图）。

.controller('UsersController', function($scope, $http) {
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = 25; // this should match however many results your API puts on one page
getResultsPage(1);

$scope.pagination = {
current: 1
};

$scope.pageChanged = function(newPage) {
getResultsPage(newPage);
};

function getResultsPage(pageNumber) {
// this is just an example, in reality this stuff should be in a service
$http.get('path/to/api/users?page=' + pageNumber)
    .then(function(result) {
        $scope.users = result.data.Items;
        $scope.totalUsers = result.data.Count
    });
}
})

什么是分页的正确 REST URL 格式，以及如何在我的 Angular 应用程序中使用它？我相信我可以使用 $top、$skip 和 $inlinecount，但我不确定如何根据自定义指令将其转换为“页面”。这是导致解析错误的原因吗？

例如。 https://myrestcall.net/tables/articles?$top=100&$skip=50&$inlinecount=allpages

Answer 1

这是通过 Michael Bromley 的帮助解决的，如下所述：https://github.com/michaelbromley/angularUtils/issues/109