重复的角度指令不能使用两次

时间:2014-11-12 10:32:59

标签: angularjs angularjs-directive

我有一个通过传递变量自动生成分页的指令。 问题是我不能在html中复制指令调用。它只返回一个分页按钮实例。

示例,我想把它放在表格的上方和下方:

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

指令

    .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'
            }
        };
    })

1 个答案:

答案 0 :(得分:2)

我必须使用结束标记<pagination data="participants"></pagination>而不是<pagination data="participants"/>