javascript - 覆盖ui-bootstrap的默认分页模板

我正在使用AngularJS来显示分页。我对默认分页模板进行了一些更改。这是我的HTML：

<ul uib-pagination ng-model="source_pagination.current" template-url="pagination.html" total-items="source_pagination.total_pages" items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm" force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul>
...
       <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)" ng-class="{highlight: ShouldHighlightPage(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="$scope.changePage('last')" title="Last Page"><span class="glyphicon glyphicon-fast-forward"></span> </a></li>
            </ul>
        </script>

我修改了本节：

<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
    <a href ng-click="selectPage(page.number)" ng-class="{highlight: ShouldHighlightPage(page.number)}">
                            {{page.text}}
    </a>
</li>

并添加了此类条件{highlight: ShouldHighlightPage(page.number)}。此代码应调用位于控制器中的函数ShouldHighlightPage(pageNum)：

$scope.ShouldHighlightPage = function (pageNum)
{
    return true;
}

因此，所有页面都应包含类highlight。但是永远不会调用此函数（通过在函数中添加断点进行检查）。显示的所有页面都没有highlight类。

我究竟做错了什么？

谢谢。

最佳答案

好的，这里有问题。

uib-pagination指令创建一个隔离的作用域。在这里查看：https://github.com/angular-ui/bootstrap/blob/2.1.3/src/pagination/pagination.js#L126

从docs：


  范围
  
  {...}（对象哈希）：为以下对象创建了一个新的“隔离”范围
  指令的元素。 “隔离”范围与常规范围不同
  它不原型地从其父范围继承。这是
  在创建可重用组件时很有用，不应
  意外读取或修改父范围中的数据。


这意味着，方法ShouldHighlightPage在您覆盖的模板范围内将不可用。

一种直接的解决方案（不建议您使用更干净的解决方案）是在$rootScope中注册您的方法：

$rootScope.ShouldHighlightPage = function (pageNum)
{
    return true;
}

要解决此问题，请添加一个自定义指令：

myApp.directive('uibCustomPagination', function () {
    return {
        restrict: 'A',
        require: 'uibPagination',
        link: function ($scope, $element, $attr, uibPaginationCtrl) {
            uibPaginationCtrl.ShouldHighlightPage = function (pageNum) {
                return true;
            };
        }
    }
});

该指令基本上是将您的方法注入到uib-pagination指令的控制器中，以便可以在模板中使用它。

现在，只需将uib-custom-pagination指令应用于您的ul元素：

<ul uib-pagination uib-custom-pagination ng-model="source_pagination.current"
    template-url="pagination.html" total-items="source_pagination.total_pages"
    items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm"
    force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul>