Угловая директива разбиения на страницы не работает

Question

Я создал директиву для разбивки на страницы, которая будет работать с сетками по всему сайту. На этой странице у меня есть поиск, который вернет новый набор данных, и я хочу передать эти данные в свою директиву, чтобы потом появилась новая разбивка на страницы. На данный момент у меня есть только функция ссылок.

директива 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 в моей директиве, так что вновь делает мою нумерацию.

Любые идеи, как заставить это работать?

Answer 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 здесь, чтобы настроить его.

Я могу подключить это к любой сетке на моем сайте, мне просто нужны данные и пустой массив для набора данных для отображения в сетке.