我正在使用 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/