web-dev-qa-db-de.com

Die Seitendaten beim Aktualisieren der Seite beibehalten

Ich bin neu im Winkel. Ich verwende einen Dienst, der eine Liste von Objekten abruft und diese auf der ersten Seite anzeigt. Dann, basierend auf dem Objekt, auf das geklickt wurde, stelle ich auf der nächsten Seite die Registerkopfzeile ein. Während ich die Seite aktualisiere, geht der Gültigkeitsbereich der Liste jedoch verloren, und die Registerkopfzeile löst die Ausnahme aus, wodurch die Seite die Informationen nicht anzeigt. Gibt es eine Möglichkeit, die Informationen darüber zu erhalten, auf welches Objekt auf dem vorherigen Bildschirm geklickt wurde, auch wenn die zweite Seite aktualisiert wird?

angularjspage-refreshrootscope
14
Nutan

Sie können den lokalen Winkelspeicher verwenden 

Angular lokaler Speicher

Beispiel wie man es benutzt:

Beispiel zur Verwendung des lokalen Speichers

4
V31

Wenn Sie neu bei Angular sind und an nicht geschäftskritischen Projekten arbeiten, ist ein zusätzlicher Anruf beim Remote-Service nicht das Ende der Welt.

Gibt es eine Möglichkeit, die Informationen zu speichern, auf das Objekt geklickt wurde, auch wenn die zweite Seite aktualisiert wurde? 

Verwenden Sie Routing in Ihrer App?

Siehe Beispiel: http://plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview

Controller

app.controller("main", function($scope) {
    $scope.items = [1,2,3,4];
}); 
app.controller("detail", function($scope, $routeParams) {
    $scope.myvalue = $routeParams.id;
});

Routing-Konfiguration

var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'main'
      })
      .when('/detail/:id', {
        templateUrl: 'detail',
        controller: 'detail'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Wenn Sie die Detailseite aktualisieren, merkt sich dies den Status. Dann können Sie den Dienst nach Daten fragen.

4
Michal Stefanow

Hast du mehrere eckige Apps? Theoretisch sollten Sie über eine einzige HTML-Datei und Teil-Controller verfügen. Sie können die Daten, die Sie verwenden möchten, in einem Factory-Singleton- oder EJP-Cache speichern. Wenn Sie zwischen mehreren HTML-Seiten navigieren, können Sie lokalen Speicher verwenden oder neu laden die Daten vom Server.

Einige nützliche Links:

$ cache

https://docs.angularjs.org/api/ng/service/ $ cacheFactory

Lokaler Speicher:

Wie speichere ich mit Angularjs Daten im lokalen Speicher?

2
Braulio

Die beste Vorgehensweise, um mit dieser Art von Szenarien umzugehen, ist die Kombination von angle Service + localstorage. 

  • Der Service hilft Ihnen bei der Datenübertragung zwischen zwei Seiten /controller. 
  • Das Speichern dieser Daten in localstorage hilft Ihnen dabei, diese Daten bei der Seitenaktualisierung abzurufen

Und wenn die Daten nur die ID in der URL sind, dann ist auch eine Antwort von @Michal Stefanow in Ordnung.

Helping link

1
Muslim Munir