角度分頁指令不起作用

我已經創建了一個分頁指令，可以在網站上使用網格。在這個頁面上，我有一個搜索將返回一組新的數據，並且我想將這些數據傳遞到我的指令中，以便它有一個新的分頁。目前我只有鏈接功能。角度分頁指令不起作用

指令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傳遞到我的指令，以便它重新呈現分頁我。

任何想法如何讓這個工作？

來源

2015-08-19 nick gowdy

這是我的解決方案：

指令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進行配置。

我可以插入到我的網站上的任何網格，我只需要一些數據和空數組顯示在網格中的數據。

來源

2015-08-19 12:23:04

角度分頁指令不起作用

回答

相關問題