我一直在继续学习 angular，现在已经成功使用了 angular ui bootstrap 分页。我能够显示项目列表以及正确的页数。并且每当我点击分页时也会切换到正确的页面。
现在我的问题是，如果用户想为某个页面添加书签，或者确保用户在刷新浏览器时停留在同一页面上，我该怎么做。浏览器的地址栏上没有生成链接 (href)。我还需要设置路线吗？您能否发布一些示例，因为它会对我有很大帮助。谢谢。
【问题讨论】：
标签： javascript angularjs
你需要设置路由，可以使用routeProvider或ui router来完成
在这个例子中，我使用路由提供者来演示，但是思路是一样的。
这里我设置了一个以currentPage为参数的路由：
app.config(function($routeProvider) {
$routeProvider
.when('/page/:currentPage', {
templateUrl: "template.html",
controller: PaginationDemoCtrl
})
});
在您的控制器中，您可以从$routeParam 检索当前页面：
$scope.currentPage = $routeParams.currentPage || 1; //default to 1 if the parameter is missing
//load your paged data from server here.
您可以$watch当前页面进行更改并相应地更新位置：
$scope.$watch("currentPage",function(value){
if (value){
$location.path("/page/" + value);
}
})
使用路由，您还需要更新代码以从服务器加载分页数据。当currentPage 发生变化时，我们不会立即加载数据（在本例中是 $watch 函数）。我们在检索$routeParam.currentPage 参数时加载分页数据。
根据@Harry 的要求，这是另一种通过覆盖引导html 模板来生成href 链接的解决方案：
app.config(function($routeProvider) {
$routeProvider
.when('/page/:currentPage?', {
templateUrl: "template.html",
controller: PaginationDemoCtrl
})
})
.run(["$templateCache","$rootScope","$location", function($templateCache,$rootScope,$location) {
$rootScope.createPagingLink = function(pageNumber){
return "#" + $location.path().replace(/([0-9])+/,pageNumber);
//Here is a sample function to build href paths. In your real app, you may need to improve this to deal with more case.
}
$templateCache.put("template/pagination/pagination.html",
"<ul class=\"pagination\">\n" +
" <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(1)}}\">{{getText('first')}}</a></li>\n" +
" <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(page - 1)}}\">{{getText('previous')}}</a></li>\n" +
" <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a ng-href=\"{{$root.createPagingLink(page.number)}}\">{{page.text}}</a></li>\n" +
" <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(page + 1)}}\">{{getText('next')}}</a></li>\n" +
" <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(totalPages)}}\">{{getText('last')}}</a></li>\n" +
"</ul>");
}]);
【讨论】：
我们可以用 $location 来做这件事，而不需要 $route。
这是一个如何从 Angular UI Bootstrap 调用分页的示例：
<pagination ng-model="Controls.currentPage"
total-items="Controls.totalItems"
items-per-page="Controls.videosPerPage"
max-size="5"
rotate="false"
boundary-links="true"
ng-change="pageChanged()">
</pagination>
在 pageChanged() 函数中，使用以下内容为您的结果页面创建一个唯一的 URL：
**我的代码在Coffeescript上，但是逻辑简单，代码容易适配**
$location.search('page', $scope.Controls.currentPage)
在您的控制器上，使用以下命令在启动时检查 URL 参数是否存在：
urlParams = $location.search()
if urlParams.page?
$scope.Controls.currentPage = urlParams.page
else
$scope.Controls.currentPage = 1
【讨论】：
是的，如果您希望您的应用允许链接到某些状态，那么您必须让您的应用利用 routeProvider。
官方文档没有大量关于路线的信息，但教程有这个页面：
http://docs.angularjs.org/tutorial/step_07
John Lindquist 的优秀短视频教程也是必看的。处理路线的一种方法是：
【讨论】：
这里是通用解决方案 - uibPagination 指令装饰器和更新的模板：
angular.module('ui.bootstrap.pagination')
.config(function($provide) {
$provide.decorator('uibPaginationDirective', function($delegate, $templateCache) {
var directive = $delegate[0];
directive.scope.getPageHref = "&";
$templateCache.put("uib/template/pagination/pagination.html",
"<li ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"pagination-first\"><a ng-href=\"{{noPrevious() ? '' : getPageHref()(1)}}\" ng-disabled=\"noPrevious()||ngDisabled\" uib-tabindex-toggle>{{::getText('first')}}</a></li>\n" +
"<li ng-if=\"::directionLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"pagination-prev\"><a ng-href=\"{{noPrevious() ? '' : getPageHref()(page - 1)}}\" ng-disabled=\"noPrevious()||ngDisabled\" uib-tabindex-toggle>{{::getText('previous')}}</a></li>\n" +
"<li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active,disabled: ngDisabled&&!page.active}\" class=\"pagination-page\"><a ng-href=\"{{getPageHref()(page.number)}}\" ng-disabled=\"ngDisabled&&!page.active\" uib-tabindex-toggle>{{page.text}}</a></li>\n" +
"<li ng-if=\"::directionLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"pagination-next\"><a ng-href=\"{{noNext() ? '' : getPageHref()(page + 1)}}\" ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('next')}}</a></li>\n" +
"<li ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"pagination-last\"><a ng-href=\"{{noNext() ? '' : getPageHref()(totalPages)}}\" ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('last')}}</a></li>\n" +
"");
return $delegate;
});
});
我们使用从用于构造页面链接的外部作用域传递的getPageHref 函数来装饰指令。
用法：
<div ng-controller="ProductController">
...
<ul uib-pagination
total-items="totalItems"
ng-model="page"
get-page-href="getPageHref">
</ul>
</div>
现在您必须在外部范围内定义 getPageHref 函数：
angular.module('app')
.controller('ProductController', function($scope) {
...
$scope.getPageHref = function(page) {
return '#/products?page=' + page;
};
});
【讨论】：
为了让代码看起来更好，你可以在 uib-pagination 元素上使用 template-url 属性
指定您的新模板 url
我应该使用ui-sref 而不是使用函数来生成链接。
而不是为每个页面单击重新加载控制器，而是通过 ng-click 和 $event 传递一个函数，这样您就可以防止执行 href
使用e.preventDefault() 并在之前调用您的ajax
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a ui-sref="list({page: page.text})" ng-click="$root.paginationClick(page.number,$event)">{{page.text}}</a></li>
【讨论】：