我一直在继续学习角度,现在已经成功地使用了角度ui引导分页.我可以显示项目列表和正确的页数.并且每当我点击分页时也切换到正确的页面.
现在我的问题是如果用户想要为某个页面添加书签,或者确保用户在刷新浏览器时保持在同一页面上,那我该怎么做呢?在浏览器的地址栏上没有生成链接(href).我还需要设置路线吗?你能否发表一些例子,因为这将大大有助于我.谢谢.
解决方法
您需要设置路由,您可以使用
routeProvider或
ui router
在这个例子中,我使用路由提供程序进行演示,但是想法是一样的.
app.config(function($routeProvider) { $routeProvider .when('/page/:currentPage',{ templateUrl: "template.html",controller: PaginationDemoCtrl }) });
$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?',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>"); }]);
原文地址:https://www.jb51.cc/js/150452.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。