angularjs - hello - ui router back to previous state



Angular UI Router Nested State Auflösung in untergeordneten Zuständen (2)

Die Art, wie ich den UI-Router als außergewöhnlich empfinde , ist das Verhalten, das du gerade beschrieben hast.

Lassen Sie uns über eine Entität nachdenken, z. B. Kontakt. So wäre es schön, eine rechte Seite zu haben, die uns die Liste der Kontakte zeigt, der linke Teil das Detail. Bitte überprüfen Sie die Grundlagen der Verwendung von UI-Router mit AngularJS für einen schnellen Überblick über das Layout. Eine zitieren:

Der ui-router berücksichtigt vollständig die Zustandsmaschine eines Routing-Systems. Es ermöglicht Ihnen, Zustände zu definieren und Ihre Anwendung in diese Zustände zu überführen. Der wirkliche Gewinn besteht darin, dass Sie verschachtelte Zustände entkoppeln und einige sehr komplizierte Layouts in eleganter Weise ausführen können.

Sie müssen etwas anders über Ihr Routing nachdenken, aber wenn Sie erst einmal den state-based Ansatz verstanden haben, werden Sie es wahrscheinlich mögen.

Ok, warum das alles?

Weil wir einen Contact der eine Liste darstellt. Sagen Sie eine feste Liste aus der Perspektive des Details . (Skip-Listen-Paging-Filterung jetzt) Wir können auf die Liste klicken und in einen Zustand Contact.Detail(ID) , um nur das ausgewählte Objekt zu sehen. Und dann wähle einen anderen Kontakt / Gegenstand.

Hier kommt der Vorteil verschachtelter Zustände:

Die Liste (der Contact ) wird nicht neu geladen. Während der Child-Status Contact.Detail ist.

Das sollte erklären, warum das "seltsame" Verhalten als korrekt behandelt werden sollte.

Beantworten Sie Ihre Frage, wie Sie mit dem Benutzerstatus umgehen. Ich würde einige Top-Geschwister eines Routen-Status verwenden, mit seiner getrennten Ansicht und Controller und etwas Lebenszyklus nahe ... ausgelöst in einigen Zyklen

In einer eckigen App, an der ich arbeite, möchte ich, dass es einen abstrakten Elternstatus gibt, der bestimmte Abhängigkeiten für alle seine Kinderzustände auflösen muss. Insbesondere möchte ich, dass alle Staaten, die einen authentifizierten Benutzer benötigen, diese Abhängigkeit von einem bestimmten Authroot-Status übernehmen.

Es treten Probleme auf, bei denen die Elternabhängigkeit nicht immer wieder aufgelöst wird. Im Idealfall möchte ich, dass der Elternstatus überprüft, ob der Benutzer immer noch automatisch für einen untergeordneten Status angemeldet ist. In den docs heißt es

Untergeordnete Zustände erben aufgelöste Abhängigkeiten von übergeordneten Status (en), die sie überschreiben können.

Ich finde, dass die Elternabhängigkeit nur wieder aufgelöst wird, wenn ich einen untergeordneten Zustand von einem Zustand außerhalb des Elternteils eingebe, aber nicht, wenn ich zwischen Geschwisterstaaten umschalte.

Wenn Sie in diesem Beispiel zwischen den Zuständen autroot.testA und authroot.testB wechseln, wird die GetUser-Methode nur einmal aufgerufen. Wenn Sie in den other Status und zurück wechseln, wird es erneut ausgeführt.

Ich bin in der Lage, die Benutzerabhängigkeit auf jeden der untergeordneten Zustände zu setzen, um sicherzustellen, dass die Methode jedes Mal aufgerufen wird, wenn Sie einen dieser Zustände eingeben, aber dies scheint den Zweck der geerbten Abhängigkeit zu besiegen.

Verstehe ich die Dokumente falsch? Gibt es eine Möglichkeit, den Elternstatus zu erzwingen, seine Abhängigkeiten erneut aufzulösen, selbst wenn der Status zwischen Geschwistern wechselt?

jsfiddle

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script>
(function(ng) {
    var app = ng.module("Test", ["ui.router"]);
    app.config(["$stateProvider", "$urlRouterProvider", function(sp, urp) {
        urp.otherwise("/testA");
        sp.state("authroot", {
            abstract: true, 
            url: "",
            template: "<div ui-view></div>", 
            resolve: {User: ["UserService", function(UserService) {
                        console.log("Resolving dependency...");
                        return UserService.GetUser();
                    }]}
        });
        sp.state("authroot.testA", {
            url: "/testA", 
            template: "<h1>Test A {{User|json}}</h1>", 
            controller: "TestCtrl"
        });
        sp.state("authroot.testB", {
            url: "/testB", 
            template: "<h1>Test B {{User|json}}</h1>", 
            controller: "TestCtrl"
        });
        sp.state("other", {
            url: "/other", 
            template: "<h1>Other</h1>", 
        });
    }]);
    app.controller("TestCtrl", ["$scope", "User", function($scope, User) {$scope.User = User;}]);
    app.factory("UserService", ["$q", "$timeout", function($q, $timeout) {
        function GetUser() {
            console.log("Getting User information from server...");
            var d = $q.defer();
            $timeout(function(){
                console.log("Got User info.");
                d.resolve({UserName:"JohnDoe1", OtherData: "asdf"});
            }, 500);
            return d.promise;
        };
        return {
            GetUser: GetUser
        };
    }]);
})(window.angular);
</script>
</head>
<body ng-app="Test">
    <a ui-sref="authroot.testA">Goto A</a>
    <a ui-sref="authroot.testB">Goto B</a>
    <a ui-sref="other">Goto Other</a>
    <div ui-view>Loading...</div>
</body>
</html>

Answer #1

Wirklich kurze Antwort ist Gebrauch:

$rootScope.$on("$stateChangeStart")

auf Änderungen des Umfangs zu achten und entsprechende Maßnahmen zu ergreifen.

Längere Antwort ist, schau http://jsfiddle.net/jasallen/SZGjN/1/ die Geige an: http://jsfiddle.net/jasallen/SZGjN/1/

Beachten Sie, dass ich app.run verwendet habe, was bedeutet, dass ich den Benutzer für jede Statusänderung auflösung. Wenn Sie es auf Statusänderungen beschränken möchten, während sich authRoot in der Elternschaft befindet, setzen Sie die Überprüfung für $stateChangeStart in den authRoot-Controller.





angular-ui-router