角度分页指令不起作用答案

【问题标题】：angular pagination directive not working角度分页指令不起作用
【发布时间】：2015-08-19 20:23:04
【问题描述】：

我创建了一个分页指令，该指令将与整个站点的网格一起使用。在此页面上，我进行了一个搜索，它将返回一组新数据，并且我想将该数据传递到我的指令中，以便它有一个新的分页。目前我只有一个链接功能。

指令html

<table-pagination current-page="1" num-per-page="5" max-size="5" pagination-data="membersData" get-filtered-data="getFilteredData(membersData)" returned-paginated-data="returnedPaginatedData(data)"></table-pagination>

directive.js

myAppModule.directive('tablePagination',
        function () {
            return {
                templateUrl: 'Scripts/app/templates/tmplPagination.html',
                restrict: 'E',
                scope: {
                    currentPage: '=',
                    numPerPage: '=',
                    maxSize: '=',
                    paginationData: '=',
                    getFilteredData: '=',
                    filteredMembersData: '&'
                },
                link: function (scope, elem, attrs) {
                    scope.getFilteredData = function () {
                        $scope.$watch('currentPage + numPerPage', function () {
                            var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
                            $scope.filteredMembersData = scope.paginationData.slice(begin, end);
                        });
                    }
                },
                controller: [
                '$scope', function ($scope) {

                }]
            }
        });

分页模板

<h4>Total number of records: {{membersData.length}}</h4>
<pagination ng-model="currentPage" total-items="membersData.length" max-size="maxSize"  boundary-links="true"></pagination>

联系搜索控制器

$scope.returnedPaginatedData = function(data) {
                $scope.filteredMembersData = data;
            }

我想将 $scope.filteredMembersData 传递到我的指令中，以便它重新呈现我的分页。

任何想法如何让它工作？

【问题讨论】：

标签： javascript angularjs angularjs-directive pagination

【解决方案1】：

这是我的解决方案：

指令 HTML

 <table-pagination current-page="1" num-per-page="5" max-size="5" source-data="membersData" grid-data="gridData"></table-pagination>

我为网格的外观和数据源（整个数据）传递了一些设置。我还传入了一个数组（gridData）

Directive.js

myAppModule.directive('tablePagination',
        function () {
            return {
                templateUrl: 'Scripts/app/templates/tmplPagination.html',
                restrict: 'E',
                scope: {
                    currentPage: '=',
                    numPerPage: '=',
                    maxSize: '=',
                    sourceData: '=',
                    gridData: '='
                },
                link: function (scope, elem, attrs) { // need this for when pagination is clicked
                        scope.$watch('currentPage + numPerPage', function () {
                            var begin = ((scope.currentPage - 1) * scope.numPerPage), end = begin + scope.numPerPage;
                            scope.gridData = scope.sourceData.slice(begin, end);
                        });

                },
                controller: [
                '$scope', function ($scope) {
                    $scope.$watch('sourceData', function () { // need this for when data changes
                        var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
                        $scope.gridData = $scope.sourceData.slice(begin, end);
                    });

                }]
            }
        });

我有一个观察数据何时发生变化，另一个观察当前页面和数字页面。当我单击分页转到下一组数据时，它们充当事件句柄。

template.html

<div>
    <h4>Total number of records: {{sourceData.length}}</h4>
    <pagination ng-model="currentPage" total-items="sourceData.length" max-size="maxSize" boundary-links="true"></pagination> 
</div>

我这里有一些分页html来配置它。

我可以将它插入到我网站上的任何网格中，我只需要一些数据和空数组就可以在网格中显示数据集。

【讨论】：