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

Question

我使用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类。

我做错了什么？

谢谢。

Answer 1

好的，这里有问题。

uib-pagination指令创建一个隔离的范围。请在此处查看：https://github.com/angular-ui/bootstrap/blob/2.1.3/src/pagination/pagination.js#L126

来自docs：

  

范围

     

{...}（对象哈希）：一个新的＆＃34;隔离＆＃34;范围是为。创建的   指令的要素。 ＆＃39;隔离＆＃39;范围与正常范围不同   它没有原型继承其父范围。这是   在创建可重用组件时很有用，但不应该   意外地读取或修改父作用域中的数据。

这意味着，方法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>