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

Override the default pagination template of ui-bootstrap

本文关键字：分页 默认 ui-bootstrap 覆盖      更新时间：2023-09-26

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

和from the 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>
相关文章：