[英]angular pagination directive not working
我創建了一個分頁指令,該指令可與整個站點的網格一起使用。 在此頁面上,我進行了搜索,該搜索將返回一組新數據,並且我想將該數據傳遞到我的指令中,以便隨后具有新的分頁。 目前,我只有鏈接功能。
指令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>
指令
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傳遞給我的指令,以便它重新呈現我的分頁。
任何想法如何使它工作?
這是我的解決方案:
指令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來配置它。
我可以將其插入到網站上的任何網格中,我只需要一些數據和空數組即可將數據集顯示在網格中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.