javascript - Angular http 从 ng-click 获取

Question

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

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

页面最初使用 $scope.displayData = function (url, page, limit) 加载，并使用 $scope.displayData("linktomydata?", 1, 20); 调用 从我的 Controller 中返回类似 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>