dirPaginate: Multiple Instances within directive ng-repeat

[santhosh883]

I need to have multiple instances of dir-pagination-controls which is in a isolated scope directive. And directives are created dynamically. I cant give a unique pagination-id in this case to make unique instance of dir-paginate. My code works but it changes the page count in all the dir-pagination-controls if one is changes. here is my code

repeating directives :

  <ng-dashboard-tile data="model" preference="customerPreference" block-title="{{blocks}}"  index="{{$index}}"></ng-dashboard-tile>  
 </div> 

Directive code :+1:

<div  class="content row-fluid span12" ng-show="expand && selection == tableViewList[0]" >
      <div class="span12" style="border: 1px solid #dfdfdf;">
        <table class="table table-hover table-condensed table-responsive" cellspacing="0" >

            <th ng-repeat="column in customerPreference.meetingListColumns">
              <a href="" ng-click="sortTable(column,reverse)">{{column | capitalize}}</a>

             <ng-custom-filter type-list="meetingTypeList" control="filterModelData" element-id="{{meetingType.type}}" block-index="{{blockIndex}}" ng-if="column == meetingType.type"></ng-custom-filter>

              <ng-custom-filter type-list="votedList" control="filterModelData" element-id="{{voted.type}}" block-index="{{blockIndex}}" ng-if="column == voted.type"></ng-custom-filter>
            </th>

          <tr dir-paginate="row in filteredModel  | orderBy:predicate:reverse | itemsPerPage: pageSize" pagination-id="blockIndex + 'pagination'" class="clickableRow" data-ng-click="selectTableRow(row)">
            <td ng-repeat="column in customerPreference.meetingListColumns">{{row[column]}}</td>
          </tr>
        </table>
        <div class="text-center">
          <dir-pagination-controls boundary-links="true" pagination-id="blockIndex + 'pagination'" template-url="dirPagination.tpl.html"></dir-pagination-controls> <!-- pagination-id="blockIndex + '_pagination'" -->
        </div>
      </div>
    </div>

I have some customization like this below :

• «
• <  Prev
• of {{ totalPages}}
• Next  >
• »

Any help would be very much appreciated

[michaelbromley]

Hi, can you confirm that the blockIndex value is unique for each instance of your directive? The behavior you describe suggests that it may not be.

Also make sure you are using the latest version.

[santhosh883]

I think I have the latest version.. The code was updated 7 days ago. I can get the blockindex resolved for the pagination is in dir paginAtion control.. But not in the $compile of dir-pagination. All my directives have the same table showing the same filter data. Thanks for responding. I will post more code in couple of hours

[santhosh883]

Just to add, I can see the $compile of dirPaginate is called only once with the unresolved blockindex value... var paginationId = $parse(attrs.paginationId)(scope) || attrs.paginationId || DEFAULT_ID;. And I can confirm the blockindex is resolved in dirPaginationControls (var paginationId = scope.paginationId || attrs.paginationId || DEFAULT_ID; ). I am not sure what i am doing wrong, i believe this is suppose to be called twice coz the directive is created twice through ng-repeate. No sure what I am doing wrong. I have changed your directive code a little bit to meet my requirements of pagination dropdown.

Here is some of the code changes i made

 function generatePagesArray(currentPage, collectionLength, rowsPerPage, paginationRange) {
        var pages = [];

        for (var j=1; j<=calculateTotalPages(collectionLength, rowsPerPage); j++) {
            pages.push(j);
        }

        return pages;
    }

    function calculateTotalPages(collectionLength, rowsPerPage) {

        return totalPages= Math.ceil(collectionLength/rowsPerPage);
    }

And I added totalPage to the scope in these functions

function goToPage(num) { if (isValidPageNumber(num)) { scope.pages = generatePagesArray(num, paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId), paginationRange); scope.totalPages = calculateTotalPages(paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId)); scope.pagination.current = num; updateRangeValues();

                // if a callback has been set, then call it with the page number as an argument
                if (scope.onPageChange) {
                    scope.onPageChange({ newPageNumber : num });
                }
            }
        }

        function generatePagination() {
            var page = parseInt(paginationService.getCurrentPage(paginationId)) || 1;

            scope.pages = generatePagesArray(page, paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId), paginationRange);
            scope.totalPages = calculateTotalPages(paginationService.getCollectionLength(paginationId), paginationService.getItemsPerPage(paginationId));
            scope.pagination.current = page;
            scope.pagination.last = scope.pages[scope.pages.length - 1];
            if (scope.pagination.last < scope.pagination.current) {
                scope.setCurrent(scope.pagination.last);
            } else {
                updateRangeValues();
            }
        }

ul class="pagination" ng-if="1 < pages.length">

«

<  Prev

of {{ totalPages}}

Next  >

»

[santhosh883]

here is a plunker with the issue : http://plnkr.co/edit/Dr6LkfkiGFv9R2d3DCcN?p=preview

[santhosh883]

I fixed it .. http://plnkr.co/edit/8jrej1ExFdPrm7Zxjzgz?p=preview. THanks for you help