javascript - 使用 AngularJS 和 Azure 移动 Web 服务与 ng-resource 进行分页

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' }
}
);
}]);

我的 Controller 是(请注意，我删除了投票功能以保持本文简洁):

 // 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 如下(请注意，我在这篇文章中从 Controller 中删除了投票功能，以使其更加简洁):

    <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 Error: [$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 at Error (native)

它似乎引用了“totalusers”，但我的 Controller 有“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=所有页面

Answer 1

这个问题已通过 Michael Bromley 的协助解决，如下所述:https://github.com/michaelbromley/angularUtils/issues/109