Wie man Links im Angular UI Bootstrap Pagination generiert

Question

Ich habe damit fortgefahren, Angular zu lernen und habe nun erfolgreich die Angular UI Bootstrap-Pagination verwendet. Ich bin in der Lage, die Liste der Elemente zusammen mit der richtigen Anzahl von Seiten anzuzeigen. Und auch auf die richtige Seite zu wechseln, wann immer ich auf die Paginierung klicke.

Jetzt ist meine Frage, wenn ein Benutzer eine bestimmte Seite als Lesezeichen setzen möchte oder sicherstellen möchte, dass der Benutzer auf derselben Seite bleibt, wenn er den Browser aktualisiert, wie gehe ich dabei vor. Es werden keine Links (href) in der Adressleiste des Browsers generiert. Muss ich auch Routen festlegen? Können Sie bitte einige Beispiele posten, da mir das sehr helfen würde. Vielen Dank.

Answer 1

Sie müssen Routen einrichten, das können Sie mit routeProvider oder UI-Router tun

In diesem Beispiel verwende ich den Routen-Provider zur Demonstration, aber die Idee ist die gleiche.

Hier richte ich eine Route mit currentPage als Parameter ein:

app.config(function($routeProvider) {
  $routeProvider
    .when('/page/:currentPage', {
        templateUrl: "template.html",
        controller: PaginationDemoCtrl
    })
});

In Ihrem Controller können Sie die aktuelle Seite aus $routeParams abrufen:

$scope.currentPage = $routeParams.currentPage || 1; // default auf 1 setzen, wenn der Parameter fehlt
// laden Sie hier Ihre seitenweise Daten vom Server.

Sie könnten einfach die aktuelle Seite mit $watch überwachen, um Änderungen zu erfassen und den Standort entsprechend zu aktualisieren:

$scope.$watch("currentPage",function(value){
     if (value){
        $location.path("/page/" + value);
     }
  })

Quellcode

DEMO-Link

Bei der Routenführung müssen Sie auch Ihren Code aktualisieren, um seitenweise Daten vom Server zu laden. Wir laden Daten nicht sofort, wenn sich die currentPage ändert (in diesem Fall die $watch-Funktion). Wir laden unsere seitenweise Daten, wenn wir den $routeParam.currentPage-Parameter abrufen.

Wie von @Harry angefordert, hier eine weitere Lösung zum Generieren von href-Links durch Überschreiben des Bootstrap-HTML-Templates:

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);
// Hier ist eine Beispiel-Funktion zum Aufbauen von href-Pfaden. In Ihrer realen App müssen Sie dies möglicherweise verbessern, um mit mehr Fällen umzugehen.
  }

  $templateCache.put("template/pagination/pagination.html",
    "\n" +
    "  {{getText('first')}}\n" +
    "  {{getText('previous')}}\n" +
    "  {{page.text}}\n" +
    "  {{getText('next')}}\n" +
    "  {{getText('last')}}\n" +
    "");
}]);

Quellcode

DEMO-Link

Answer 2

Wir können dies mit dem $location machen, ohne $route zu benötigen.

Hier ist ein Beispiel, wie man die Pagination aus Angular UI Bootstrap aufruft:

Innerhalb der pageChanged() Funktion, verwenden Sie das folgende, um eine eindeutige URL für Ihre Ergebnisseite zu erstellen:

** Mein Code ist in Coffeescript, aber die Logik ist einfach und der Code leicht anzupassen **

$location.search('page', $scope.Controls.currentPage)

Und in Ihrem Controller verwenden Sie das folgende, um zu überprüfen, ob der URL-Parameter vorhanden ist, wenn Sie starten:

urlParams = $location.search()
if urlParams.page?
  $scope.Controls.currentPage = urlParams.page
else
  $scope.Controls.currentPage = 1

Answer 3

Ja, wenn Sie möchten, dass Ihre App das Verknüpfen mit bestimmten Zuständen ermöglicht, müssen Sie Ihre App den routeProvider nutzen lassen.

Die offizielle Dokumentation enthält nicht viele Informationen zu Routen, aber das Tutorial hat diese Seite:

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

Außerdem sind John Lindquists ausgezeichnete kurze Videotutorials ein Muss. Eines, das sich mit Routen beschäftigt, ist:

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

Answer 4

Hier die generische Lösung - der uibPagination Direktiven-Dekorateur und das aktualisierte Template:

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",
                "{{::getText('first')}}\n" +
                "{{::getText('previous')}}\n" +
                "{{page.text}}\n" +
                "{{::getText('next')}}\n" +
                "{{::getText('last')}}\n" +
                "");
            return $delegate;
        });
    });

Wir dekorieren die Direktive mit der getPageHref Funktion, die vom äußeren Scope übergeben wird und die zur Konstruktion der Seitenlinks verwendet wird.

Verwendung:

    ...

Jetzt musst du die getPageHref Funktion in deinem äußeren Scope definieren:

angular.module('app')
.controller('ProductController', function($scope) {
    ...
    $scope.getPageHref = function(page) {
        return '#/products?page=' + page;
    };
});

Answer 5

Nur um den Code schöner aussehen zu lassen, können Sie das template-url-Attribut im uib-pagination-Element verwenden, um Ihre neue Vorlagen-URL anzugeben.

Ich würde ui-sref anstelle einer Funktion verwenden, um den Link zu generieren.

und anstelle des erneuten Ladens des Controllers für jeden Seitenklick eine Funktion für ng-click mit $event übergeben, damit Sie das Ausführen des href verhindern können mit e.preventDefault() und Ihren Ajax-Aufruf tätigen können.

{{page.text}}