Wie lade ich den aktuellen Status neu?


333

Ich verwende Angular UI Router und möchte den aktuellen Status neu laden und alle Daten aktualisieren / die Controller für den aktuellen Status und den übergeordneten Status erneut ausführen.

Ich habe 3 Statusebenen: directory.organisations.details

directory.organisations enthält eine Tabelle mit einer Liste von Organisationen. Durch Klicken auf ein Element in der Tabelle wird directory.organisations.details geladen, wobei $ StateParams die ID des Elements übergibt. Im Detailstatus lade ich die Details für dieses Element, bearbeite sie und speichere dann Daten. Alles in Ordnung soweit.

Jetzt muss ich diesen Status neu laden und alle Daten aktualisieren.

Ich habe versucht:

 $state.transitionTo('directory.organisations');

Das geht in den übergeordneten Status, lädt aber den Controller nicht neu, denke ich, weil sich der Pfad nicht geändert hat. Im Idealfall möchte ich nur im Status " directory.organisations.details" bleiben und alle Daten im übergeordneten Element aktualisieren.

Ich habe auch versucht:

$state.reload()

Ich habe dies auf der API WIKI für $ state.reload gesehen "(Fehler mit Controllern, die gerade neu installiert werden und bald behoben werden)."

Jede Hilfe wäre dankbar?


7
Ich habe dies wie folgt gelöst: $ state.transitionTo ($ state.current, $ stateParams, {reload: true, erben: false, notify: true});
Holland Risley

1
Wo kann man diesen Code hinzufügen?
Manoj G

Also ist der Fehler jetzt behoben? github.com/angular-ui/ui-router/wiki/…
jchnxu

Wo soll der Code $state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})hinzugefügt werden? Wenn ich das gleiche Problem mit dem Neuladen meiner Status habe, gehen alle Daten verloren.
Evan Burbidge

Antworten:


565

Ich fand, dass dies der kürzeste Weg ist, um mit dem UI-Router zu aktualisieren:

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Update für neuere Versionen:

$state.reload();

Welches ist ein Alias ​​für:

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: true
});

Dokumentation: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload


21
Wahrscheinlich erwähnenswert, dass keines davon die Seite tatsächlich neu lädt. Wenn Sie den Status UND die Seite neu laden möchten, gibt ui-routeres meiner Meinung nach keine Methode dafür. Tu es window.location.reload(true).
SimplGy

15
@SimpleAsCouldBe Wenn Sie mehr Winkel haben möchten, können Sie dies tun $window.location.reload();. Obwohl dies ein wenig übertrieben erscheint, könnte es das Testen / Verspotten / Kennen aller Abhängigkeiten eines Codeteils etwas einfacher machen.
Edhedges

1
Nur neugierig, was genau bedeutet "$ state.current"? Ich kann keine klaren Erklärungen zur API des UI-Routers sehen. Jede Hilfe wird geschätzt, danke!
user2499325

3
@ user2499325: $ state.current gibt ein Objekt mit allen Daten zurück, die Sie in Ihrem stateProvider haben: `` `{url:" / place /: placeId ", controller:" NewPlaceController ", controllerAs:" placeVM ", templateUrl:" sites /new.place/new.place.details.html ", Name:" index.places.placeDetails "}` ``
Xavier Haniquaut

1
Sie können {} durch $ stateParams ersetzen, wenn Sie bereits Parameter als solche geladen haben: $ state.go ($ state.current, $ stateParams, {reload: true});
Tsuz

154

Diese Lösung funktioniert in AngularJS V.1.2.2:

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

8
Wo würden Sie dies hinzufügen, damit es keine Endlosschleife verursacht?
Pathsofdesign

5
Wird dies die resolveGegenstände des Staates wieder auflösen ?
TheSharpieOne

7
Außerdem müssen Sie $ stateParams nicht injizieren, wenn Sie diesen Aufruf in $ state.params ändern
Jeff Ancel

4
Funktioniert viel besser als die aktuell am höchsten bewertete Antwort, lädt die Seite tatsächlich neu. Wenn Sie das Problem mit der Endlosschleife haben, befindet sich Ihr Neuladen wahrscheinlich am falschen Ort. Ich benutze es nur auf Knopfdruck
Dan

2
Ein bisschen spät für @ManojG, aber Sie würden diesen Code überall dort platzieren, wo Sie ein erneutes Laden erzwingen müssen - möglicherweise in einer ng-click-Direktivenfunktion oder einem anderen Ereignis. Es sollte aus offensichtlichen Gründen nicht bei jedem Laden einer Seite durchgeführt werden (Endlosschleife)
sricks

68

Das wäre die endgültige Lösung. (inspiriert von @ Hollan_Risleys Beitrag)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

Wenn Sie jetzt neu laden müssen, rufen Sie einfach an:

$state.forceReload();

6
Inifinit-Schleife des Todes
CS

6
Klingt so, als hätten Sie irgendwo einen Abfangjäger, der ausgelöst wird. Ich habe diese Lösung mehrmals getestet und sie funktioniert einwandfrei.
MK

2
@MK Danke für diesen Hinweis. Es führte mich zur Lösung meines eigenen, anderen Problems. Ich habe stundenlang versucht herauszufinden, warum meine Anfragen verdoppelt, dann verdreifacht usw. wurden, und alles lag an einem Abfangjäger ( github.com/witoldsz/angular-http-auth ).
Maciej Gurban

57

für ionisches Gerüst

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

https://github.com/angular-ui/ui-router/issues/582


Funktioniert gut für mich, wenn es nicht $state.gogelungen ist, in einen neuen Zustand umzuleiten. Danke @RouR. Hat meinen Tag gerettet.
Guillaume Wuip

Ich denke, $ state.go durch $ state.transitionTo ersetzen. Wo immer Sie $ state.go aufrufen, ersetzen Sie das einfach. Es könnte ungefähr so ​​aussehen wie $ state.transitionTo ('tab-name', {key: value}, {reload: true, erben: true, notify: true}
Bill Pope

2
Cache: false macht den Trick .. aber wie stark wirkt es sich auf die Leistung aus?
FrEaKmAn

Ändern Sie $ state.go mit $ state.transitionTo, um den Status zu ändern und @ManojG
Gery

Muss ich eine neue Bibliothek hinzufügen, um sie verwenden zu können $state? Ich laufe ionic 1.4.0, eckig 1.5.3
josinalvo

45

Wahrscheinlich wäre der sauberere Ansatz der folgende:

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

Wir können den Status nur aus dem HTML neu laden.


7
Sie können auch ui-sref-opts = "{reload: 'child.state'}" verwenden, um ein erneutes Laden der gesamten Seite zu vermeiden, wobei 'child.state' eine Zeichenfolge ist, die Ihren tatsächlichen Status darstellt.
Michael Fulton



13
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };

7

Wenn Sie Ihre gesamte Seite neu laden möchten, wie es scheint, fügen Sie einfach $ window in Ihren Controller ein und rufen Sie dann auf

$window.location.href = '/';

Wenn Sie jedoch nur Ihre aktuelle Ansicht neu laden möchten, fügen Sie $ scope, $ state und $ stateParams ein (letzteres nur für den Fall, dass sich bei diesem bevorstehenden Neuladen einige Parameter ändern müssen, z. B. Ihre Seitenzahl), und rufen Sie dies in einer beliebigen auf Controller-Methode:

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 Angular-UI-Router v0.2.15


6

Dumme Problemumgehung, die immer funktioniert.

$state.go("otherState").then(function(){
     $state.go("wantedState")
});

3

Für Angular v1.2.26 funktioniert keine der oben genannten Funktionen. Ein ng-Klick, der die oben genannten Methoden aufruft, muss zweimal angeklickt werden, damit der Status neu geladen wird.

Also habe ich 2 Klicks mit $ timeout emuliert.

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);

Navigation.reload () erforderte zwei Klicks mit Angular 1.3.0-rc0, aber der Übergang zu () funktionierte einwandfrei. Vielleicht versuchen Sie ein Upgrade, wenn Sie dieses Problem haben
sricks


3

Ich bin mir nicht sicher, warum keines davon für mich zu funktionieren schien. derjenige, der es endlich tat, war:

$state.reload($state.current.name);

Dies war mit Angular 1.4.0


2

Ich hatte mehrere verschachtelte Ansichten und das Ziel war, nur eine mit Inhalt neu zu laden. Ich habe verschiedene Ansätze ausprobiert, aber das einzige, was für mich funktioniert hat, ist:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

In diesem Fall würde nur die benötigte Ansicht neu geladen und das Caching würde weiterhin funktionieren.


lade true oder false neu, du wirst als false erwähnt. false wird der Inhalt mit den neuesten Änderungen neu geladen?
Deadend

2

Ich weiß, dass es eine Reihe von Antworten gegeben hat, aber der beste Weg, dies zu tun, ohne eine vollständige Seitenaktualisierung zu verursachen, besteht darin, einen Dummy-Parameter für die Route zu erstellen, die aktualisiert werden soll, und dann, wenn ich die Route aufrufe, übergebe ich eine Zufallszahl zum Dummy-Parameter.

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

und dann der Anruf auf diese Route

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

Funktioniert wie ein Zauber und kümmert sich um die Auflösungen.



2

Wenn Sie ionic v1 verwenden, funktioniert die oben genannte Lösung nicht, da ionic das Template-Caching als Teil von $ ionicConfigProvider aktiviert hat.

Das Problem zu umgehen ist etwas hackig - Sie müssen den Cache in der Datei ionic.angular.js auf 0 setzen:

$ionicConfigProvider.views.maxCache(0);

1

Ich hatte dieses Problem, es hat meinen Kopf zerstört, mein Routing wird aus einer JSON-Datei gelesen und dann in eine Direktive eingespeist. Ich konnte auf einen UI-Status klicken, aber die Seite konnte nicht neu geladen werden. Ein Kollege von mir hat mir also einen schönen kleinen Trick dafür gezeigt.

  1. Holen Sie sich Ihre Daten
  2. Erstellen Sie in Ihrer Apps-Konfiguration einen Ladezustand
  3. Speichern Sie den Status, zu dem Sie wechseln möchten, im Rootscope.
  4. Setzen Sie Ihren Standort in Ihrer app.run auf "/ load"
  5. Lösen Sie im Ladecontroller das Routing-Versprechen und setzen Sie den Standort auf Ihr beabsichtigtes Ziel.

Das hat bei mir funktioniert.

Ich hoffe es hilft

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.