CODEWITHSUNDEEP
angularjsangularjs-directive
thedjaney
thedjaney

Reputation: 1126

Duplicate angular directive cannot be used twice

I have a directive that automatically generates pagination by passing a variable. The problem is that I can't duplicate the directive call in the html. It only returns one instance of the paging buttons.

Example, I want to put it above and below a table: 

<pagination data="participants"/>
<table></table>
<pagination data="participants"/>

Directive

    .directive('pagination', function() {

        var template = '<nav>';
            template += '<ul class="pagination">';
                template += '<li ng-hide="paginationData.current_page==paginationData.first_page"><a href="#" ng-click="paginationData.get(paginationData.first_page)">&laquo;</a></li>';
                template += '<li><a ng-hide="paginationData.current_page==paginationData.first_page" href="#" ng-click="paginationData.get(paginationData.current_page-1)">Prev</a></li>';
                template += '<li ng-class="{active:i==paginationData.current_page}" ng-repeat="i in paginationData.buttons"><a href="#" ng-click="paginationData.get(i)">{{i}}</a></li>';
                template += '<li ng-hide="paginationData.current_page==paginationData.last_page"><a ng-hide="paginationData.current_page==paginationData.last_page" href="#" ng-click="paginationData.get(paginationData.current_page+1)">Next</a></li>';
                template += '<li><a href="#" ng-click="paginationData.get(paginationData.last_page)">&raquo;</a></li>';
            template += '</ul>';
        template += '</nav>';

        return {
            restrict:'E',
            template: template,
            scope: {
                paginationData: '=data'
            }
        };
    })

Upvotes: 0

Views: 240

Answers (1)

thedjaney
thedjaney

Reputation: 1126

I had to put a closing tag <pagination data="participants"></pagination> instead of <pagination data="participants"/>

Upvotes: 2

Related Questions