如何在Angular UI Bootstrap Pagination中生成鏈接

Question

我一直在繼續學習角度，現在已成功使用角度ui bootstrap分頁。 我能夠顯示項目列表以及正確的頁數。 每當我點擊分頁時，也會切換到正確的頁面。

現在我的問題是，如果用戶想要為某個頁面添加書簽，或者為了確保用戶在刷新瀏覽器時保持在同一頁面上，我該如何處理它。 瀏覽器的地址欄上沒有生成鏈接（href）。 我還需要設置路線嗎？ 請你發一些例子，因為它會對我有很大的幫助。 謝謝。

Answer 1

您需要設置路由，您可以使用routeProvider或ui路由器來完成

在這個例子中，我使用路由提供程序來演示，但想法是一樣的。

這里我用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);
     }
  })

源代碼

DEMO鏈接

通過路由，您還需要更新代碼以從服務器加載分頁數據。 當currentPage更改時，我們不會立即加載數據（在本例中是$ watch函數）。 我們在檢索$routeParam.currentPage參數時加載分頁數據。

根據@Harry的要求，這是另一種通過覆蓋bootstrap 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>");
}]);

源代碼

DEMO鏈接

Answer 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

Answer 3

是的，如果您希望您的應用允許鏈接到某些狀態，那么您必須讓您的應用利用routeProvider。

官方文檔沒有關於路線的大量信息，但教程有這個頁面：

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

John Lindquist的優秀短視頻教程也是值得關注的。 處理路線的一個是：

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

Answer 4

這里是通用解決方案 - 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;
    };
});

Answer 5

只是為了使代碼看起來更好，您可以在uib-pagination元素上使用template-url屬性來指定新的模板URL

我應該使用ui-sref而不是使用函數來生成鏈接。

而不是為每個頁面重新加載控制器單擊傳遞一個函數，使用$event進行ng-click ，這樣你就可以防止使用e.preventDefault()執行href並在之前調用你的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>