覆蓋Angular UI Bootstrap分頁模板函數

Question

我在我的應用程序中使用Angular UI Bootstrap，特別是分頁（http://angular-ui.github.io/bootstrap/#/pagination）。我需要/想要覆蓋/擴展First/Last和Previous/Next的功能。

我試過以下（最後改變了函數調用changePage而不是選擇數據頁）：

<div ng-controller="PaginationDemoCtrl"> 
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" template-url="pagination.html" boundary-links="true" num-pages="numPages"></uib-pagination> 
</div> 

<script id="pagination.html" type="text/ng-template"> 
    <ul class="pagination"> 
    <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)" title="First Page"> <span class="glyphicon glyphicon-fast-backward"></span></a></li> 
    <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)" title="Previous Page"><span class="glyphicon glyphicon-step-backward"></span></a></li> 
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li> 
    <li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)" title="Next Page"><span class="glyphicon glyphicon-step-forward"></span></a></li> 
    <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="changePage(totalPages)" title="Last Page"><span class="glyphicon glyphicon-fast-forward"></span> </a></li> 
    </ul> 
</script> 

但是，這並不工作，我想是因爲範圍是不正確的（ plunkr）。

目前我正在編寫自己的自定義分頁，但必須有更好的方法？也許？

Answer 1

看看這裏source uibPagination在第123行中，您看到uibPagination指令具有隔離範圍。因此，模板中的ng-click會綁定到這個獨立的作用域，而不是PaginationDemoController的作用域。