Question

我有一个相当复杂的情况，我从一个可能有数百甚至数千个结果的API调用数据。它还包括我可以调用的分页选项。

我需要使用API数据将结果列表分成页面。

该页面最初加载$scope.displayData = function (url, page, limit)，并使用$scope.displayData("linktomydata?", 1, 20);调用，从我的控制器中返回linktomydata?page=1&limit=20之类的内容。这将显示数据的记录。

但是我有一个指令，可以根据每页20的限制来获取可能页面的总数，并且我使用一个简单的for循环来创建数据下面的链接列表以作为分页。然后将每个链接设置为使用相关参数调用displayData函数。

app.directive ('paginationList', function($timeout) {
    return {
        // Set as a replaceable element
        restrict: 'E',
        link: function(scope, element) {
            $timeout(function () {
                scope.$watch('pagination', function(pagination) {
                    if(pagination) {
                        for (var i = 1; i < scope.pagination.pages + 1; i++) {
                            element.append('<a href ng-click="displayData("linktomydata?", 6, 20)"></li>' + i + '</li></a>');   
                        };
                    }
                });
            })
        }
    }
});

这应该显示可用数据的第6页，但仍然限制为20.但是，当单击分页链接并且不返回任何内容时，显示的数据将丢失。没有控制台错误。

我是否混淆了我的示波器或什么？或者我只是错了吗？

非常感谢任何帮助。

Answer 1

是的，你正在混合一些不同的东西。用这种方式看起来会好得多：

app.directive ('paginationList', function($timeout) {
return {
    replace: true
    restrict: 'E',
    templateUrl: 'view/paginationList.html',
    link: function(scope, element) {
        var linkToMyData = 'linktomydata?';

        //using underscore's range method is the easiest way
        $scope.range = _.range;

        scope.displayData = function(page, limit){
             //do the magic here
        }
    }
}

}）;

模板：

<div>
    <li ng-repeat="page in range(1,pagination.pages)">
        <a href ng-click="displayData(page, 20)">
    </li>
</div>

用法：

<pagination-list></pagination-list>

角度http来自ng-click

1 个答案: