Angular http 从 ng-click 获取

Angular http get from ng-click

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

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

该页面最初使用 $scope.displayData = function (url, page, limit) 加载并使用 $scope.displayData("linktomydata?", 1, 20); 调用,其中 return 从我的控制器中类似于 linktomydata?page=1&limit=20。这会显示数据的记录。

但是我有一个指令根据每页 20 个的限制获取可能页面的总数,我正在使用一个简单的 for 循环在数据下方创建一个 links 的列表作为分页。每个 link 然后设置为使用相关参数调用 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 页。但是,当单击分页 link 并且没有任何内容被 return 编辑时,显示的数据会丢失。也没有控制台错误。

我是不是弄错了示波器之类的?还是我做错了?

如有任何帮助,我们将不胜感激。

是的,你有点混淆了不同的东西。 这样看起来会好得多:

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>