Question

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

我尝试过以下操作（将Last的功能更改为调用changePage而不是selectPage）：

<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

在第123行看看source uibPagination，你会发现uibPagination指令有一个独立的范围。因此，模板中的ng-click会绑定到此隔离范围，而不是PaginationDemoController的范围。

覆盖Angular UI Bootstrap分页模板功能

1 个答案: