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