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

标签 javascript angularjs pagination angular-ui-bootstrap angular-ui

我正在使用 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)}。此代码应调用位于 Controller 中的函数 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 :

Scope

{...} (an object hash): A new "isolate" scope is created for the directive's element. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

这意味着,方法 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;
            };
        }
    }
});

该指令基本上是将您的方法注入(inject)到 uib-pagination 的 Controller 中指令,以便它可以在您的模板中使用。

现在,只需申请 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>

关于javascript - 覆盖 ui-bootstrap 的默认分页模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39371403/

相关文章:

javascript - 我可以在 asp.net MVC 中实现任何 Yahoo YUI 验证框架吗?

angularjs - 当集合更改时,ng-repeat 是保留 DOM 元素还是创建所有新元素?

javascript - 修复 javascript 的分页限制

vue.js - 以编程方式更改 Bootstrap Vue 分页

javascript - $watch 不会触发带有美元 ($) 的变量

php - 每页用户显示的分页问题

javascript - Linux 操作系统上的 ibm_db 模块安装问题

javascript - 如何在特定类(class)之前选择 previous sibling 姐妹?

javascript - 正在使用的代码着色器

angularjs - 我们如何在 div 中使用 ng-keypress ?