10

我一直在继续学习 angular，现在已经成功使用了 angular ui bootstrap 分页。我能够显示项目列表以及正确的页数。并且每当我点击分页时也会切换到正确的页面。

现在我的问题是，如果用户想为某个页面添加书签，或者确保用户在刷新浏览器时停留在同一页面上，我该怎么做。浏览器的地址栏上没有生成链接 (href)。我还需要设置路线吗？您能否发布一些示例，因为它会对我有很大帮助。谢谢。

4

5 回答 5

12

您需要设置路由，可以使用routeProvider或ui router来完成

在这个例子中，我使用路由提供者来演示，但是思路是一样的。

currentPage在这里，我使用as 参数设置了一条路线：

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>");
}]);

源代码

演示链接

于 2014-05-11T09:09:57.020 回答
2

我们可以使用 $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
于 2015-05-26T13:38:17.477 回答
0

是的，如果您希望您的应用程序允许链接到某些状态，那么您将必须让您的应用程序利用 routeProvider。

官方文档没有关于路线的大量信息，但教程有这个页面：

http://docs.angularjs.org/tutorial/step_07

此外，John Lindquist 的优秀短视频教程也是必看的。处理路线的一种方法是：

http://www.egghead.io/video/gNtnxRzXj8s

于 2013-05-29T20:40:16.007 回答
0

这里是通用解决方案 -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;
    };
});
于 2016-08-09T14:12:09.370 回答
0

只是为了让代码看起来更好，你可以使用元素上的template-url属性uib-pagination来指定你的新模板 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>
于 2017-04-24T09:26:24.097 回答