Wie beibehalten optionale Status-parameter auf browser-zurück in den ui-router?

Bin ich mit einem Elternteil Zustand, hat zwei Kinder Stand drinnen, dass ich zeigen werde, der einen Staat auf der Grundlage der URL.

Aus diesen zwei states eine ist, dass man Parameter wie param1 und param2 habe ich verwenden params Möglichkeit, ui-router innerhalb state definition.

Zustand

$stateProvider.state('tabs.account', {
    url: '/account',
    views: {
        'content@tabs': {
            templateUrl: 'account.html',
            controller: function($scope, $stateParams) {
                //This params are internally used to make ajax and show some data.
                $scope.param1 = $stateParams.param1;
                $scope.param2 = $stateParams.param2;
            },
        }
    },
    params: {
        param1: { value: null }, //this are optional param
        param2: { value: null } //because they are not used in url
    }
});

Wenn Sie sich auf meiner route die params-option ist nicht wirklich eingeführt, im inneren der URL, das ist, warum ich überlege mir dann, wie optional.

Problem

Blick auf plunkr, ich habe gezeigt, zwei tabs Konto & Umfrage,

  1. Klicken Sie auf Survey-Registerkarte, dann fügen Sie einige Daten in die textarea angezeigt werden.

  2. Klicken Sie auf Gehen Sie zu Konto das wird passieren diejenigen textarea Werte
    die anderen Konto tab by doing ui-sref="tabs.account({param1: thing1, param2: thing2})" auf den Anker

  3. Nun sehen Sie den param1 & param2 Werte auf html zugewiesenen Umfang von $stateParams

  4. Jetzt wieder Klicken Sie auf Umfrage Registerkarte, dann landest du auf der Seite Umfrage.
  5. Klicken Sie einfach browser, Sie werden feststellen, dass param Wert ist nicht immer null.

Problem Plunkr

Ich glaube, du hast was ich Fragen wollte, warum der optionale parameter Wert wurde nicht gespeichert? wie wurden Sie ein Teil des Staates.

Ich weiß, ich kann das Problem lösen, indem Sie unten zwei Lösungen.

  • Werden, indem ein Dienst, der Daten zwischen zwei Ansichten.
  • Durch hinzufügen von parameter in die URL Staat. wie url: '/account/:param1/:param2', (Aber ich würde nicht dies bevorzugen)

Ich habe bereits versucht, angular-ui-Router sticky Staaten aber das scheint nicht, für mich zu arbeiten. Was ist der bessere Weg, um dieses?

Gibt es eine Möglichkeit, die ich machen kann, meine arbeiten, Irgendwelche Ideen wäre dankbar.

Github Problem Hier der Link

  • Gerade diese github.com/angular-ui/ui-router/issues/1158 über den "Benachrichtigen" - Attribut, das gesetzt werden konnte, false, um zu verhindern, dass Ereignisse wie das Neuladen controller) aber es ist eigentlich nicht funktioniert (bug).
  • danke für den Kommentar..ich werden müssen, um Uhr auf dieses Problem auch 🙁
  • Haben Sie geprüft über die query params statt url-params ? Es kann arbeiten und wird ein wenig weniger seltsam in der url ('/url/route?param1=value&param2=value')
  • Vielen Dank für die Anregung, aber ich nicht wollte, zu tun, in dieser Weise..es ist im Grunde die gleiche Sache, die ich hier mache
  • bitte Kommentar wenn Sie downvote..gibt es keine problem mit einer Frage?
InformationsquelleAutor Pankaj Parkar | 2015-07-21
  1. 21

    Ich würde verschieben die params definition der übergeordneten Staat, so teilen Sie das optionale Zustand params zwischen Ihren beiden Kind-Staaten.

    Des Kindes heißt es, Erben der $stateParams Ihrer Eltern, so gibt es keine wirkliche "Abhilfe" gebraucht.

    Einfach injizieren $stateParams wie gewohnt in Ihrem Kind-Controller, und Sie haben vollen Zugriff auf die params werden herumgereicht. Wenn Sie nicht möchten, dass die params in einer bestimmten kindlichen Zustand, haben einfach vermeiden, Injektion.

    Dieser arbeitet mit;

    • Zurück-Taste
    • Vorwärts-Taste
    • ui-sref (ohne Parameter (wird belassen wie Sie ist))
    • ui-sref (mit params (überschreiben))
    $stateProvider
  .state('parent', {
    params: { p1: null, p2: null }
  })
  .state('parent.childOne', {
    url: '/one',
    controller: function ($stateParams) {
      console.log($stateParams); //{ p1: null, p2: null }
    }
  })
  .state('parent.childTwo', {
    url: '/two',
    controller: function ($stateParams) {
      console.log($stateParams); //{ p1: null, p2: null }
    }
  })

    Falls Sie zu irgendeinem Zeitpunkt möchten klar params, während Reisen innerhalb der staatlichen Struktur der parent müssten Sie tun, damit manuell.

    Wäre die nur wirkliche Nachteil den ich sehen kann mit dieser Lösung.

    Ich begreife das manuelle clearing kann nicht wünschenswert sein, im Fall Sie vorhanden, aber Sie haben nicht eine aktive Stellung gegen Sie, als solche empfinde ich den Vorschlag Verdienst.

    aktualisiert plunker

    • Dies ist möglicherweise auch eine gute Lösung..werde wieder zu Euch kommen am Montag..
    • Dies ist auch eine gute Lösung. Nur ein Hinweis, dass es möglicherweise mehr param-management-wenn Sie möchten, dass der Parameter zu erhalten, wenn die Navigation aus anderen Staaten (stellen Sie sich vor, irgendwo ganz anders in der app oder extern, und dann mit dem browser-zurück-Taste - nicht sicher, ob das ist eine der Ihre use cases).
    • Params dont bestehen, wenn Sie zu einem Staat hat keine Ahnung von der params vorhanden, das gleiche gilt für die Schaltfläche "zurück". Wenn der Staat weiß über die params kommen, alles ist in Ordnung. So konnte Sie halten das mischen der einzelnen params-definition, die höher in der staatlichen Hierarchie - aber wenn es beginnt, albern, würde ich umziehen in ein service.
    • Den Anwendungsfall habe ich die Vision für das teilen von params, ist ein paar paar Staaten, die eine logische Bindung an die params werden herumgereicht. Kein Weg, würde ich immer empfehlen die Verwendung von es, wenn die Idee ist, die pass-Daten um, und speichern Sie es in einem großen Teil der / die gesamte Anwendung.
    • irgendwelche Vorschläge Wann sollte ich klar diese Werte..was Sie Gedanken?
    • Nun, da Sie gemeinsam die Werte zwischen allen Kind-Staaten der Elternteil, enthält die params Attribut, es wäre klar sich automatisch aus, sobald Sie den übergang aus diesem Zustand Baum und dann in wieder, ohne die params für den Eintritt. Es hängt wirklich davon ab, Ihren Fall, wenn Sie brauchen, um es zu deaktivieren?
    • Ich würde gerne diese appoach das passt zu meinem Anwendungsfall

    InformationsquelleAutor Kasper Lewau
  2. 7

    Einer Abhilfe Lösung ist das Zwischenspeichern der Staat params und bedingt laden Sie bei der Eingabe der tabs.account Zustand. UI-Router Staat config tatsächlich können Sie eine onEnter callback für diese Art von "etwas tun, auf in den Zustand" Situationen.

    Hier ist die grundlegende Logik, die mit "localStorage" als der cache, die mit arbeiten Plunker hier:

    • Wenn Sie geben Sie die tabs.account Zustand, überprüfen Sie Ihren Staat params
      • Wenn Sie Sie haben, Zwischenspeichern, um die lokale Speicherung
      • Wenn Sie nicht, laden Sie Sie aus dem lokalen Speicher in $stateParams

    Hier ein Beispiel-code-snippet für die Referenz (aus der Plunker):

    JS:

      $stateProvider.state('tabs.account', {
    ...
    onEnter: ['$stateParams', '$window', function($stateParams, $window) {
      if($stateParams.param1) {
        $window.localStorage.setItem('tabs.account.param1', $stateParams.param1);
      } else {
        $stateParams.param1 = $window.localStorage.getItem('tabs.account.param1');
      }
      if($stateParams.param2) {
        $window.localStorage.setItem('tabs.account.param2', $stateParams.param2);
      } else {
        $stateParams.param2 = $window.localStorage.getItem('tabs.account.param2');
      }
    }],
    ...
  }

    Einer VORBEHALT ist, dass Ihr params wird anhalten auf unbestimmte Zeit (z.B. über erfrischt und Sitzungen). Um dies zu umgehen, könnte man den cache löschen auf die Anwendung laden wie in app.run.

    Ein letzter Hinweis ist, dass in der Plunker, ich bin Zugriff auf den lokalen Speicher direkt (durch die Eckigen $window service). Möchten Sie vielleicht nutzen, um einige AngularJS-Modul - ich habe Winkel-local-storage in der Produktion.

    • Wenn Sie nicht wollen, um ewig anhalten verwenden Sie einfach die SessionStorage anstelle des "LocalStorage". Der sessionStorage haben eine Lebensdauer von einem app-Sitzung (Aktualisieren/schließen deaktivieren Sie das sessionstorage)
    • hat der sessionStorage/localStorage-Arbeit wird im alten browser wie IE9/IE10?
    • IE9/10 hat die volle Unterstützung für diese Technologien. caniuse?
    • das sieht viel versprechende dann..komme zurück zu dieser Antwort..nach meinen Tests
    • Nicht versucht abzuwerben, die für die Annahme, aber Sie haben getroffen, einen Blick auf meine vorgeschlagene Antwort? Wohl die saubersten der Reihe.
    • ja, ich bin auf der Suche an..momentan habe ich nicht habe mir hier den code..ich werde auf jeden Fall schauen Sie es auf mein Montag morgen..ich habe bereits von Ihnen positiv bewertet werden Ihre Antwort dude.. 🙂
    • Sehr gut dann! Entschuldige mich meine Plage. bewegt sich entlang oh, und das ist absolut nicht zu sagen, dass die lokalen/sessionStorage Lösung ist schlecht - überhaupt nicht.
    • Total. Als Sie sagte, trotz der Tatsache deins sieht sauberer aus, mit local/session storage ist das nicht verrückt. Wir haben es auf meine erste angular-Projekt (das war eine Entscheidung, getroffen von Winkel-Experten) zu speichern, die navigation Informationen (Wie die scroll-position in eine unendliche scrollen, suchen, Filter etc...)
    • Ich habe Ihre plunkr..wie soll ich klare Werte..jedesmal, wenn Sie beharren.Ich denke, der ähnlich wie der service/factory-Ansatz auf seine relaced von localStorage/sessionStorage
    • Hi @PankajParkar. Wissen Sie, unter welchen Umständen Sie möchten, deaktivieren Sie die Werte? Ist es auf Seite aktualisieren, ähnlich wie ein web-Formular? Wenn ja, können Sie rufen Sie localStorage.clear() (oder sessionStorage.clear()) in app.run. Hier ist eine aktualisierte plunkr mit Ausgleich in app.run und mit sessionStorage: plnkr.co/Bearbeiten/1LFTxN?p=Album Vorhören. Wenn Sie lassen Sie mich wissen, andere Szenarien, wo würden Sie wollen, dass die Werte gelöscht, würde glücklich sein, zu gehen durch diese zu.
    • Und um fair zu sein, du hast Recht, dass diese Problemumgehung ist in gewisser Weise ähnlich mit dem Speicher als shared-service-äquivalent. Wahrscheinlich das nützlichste Stück in Ihrem Fall ist mit dem Zustand onEnter callback abrufen von shared service/storage/anderen cache, so dass durch die Zeit, die Sie bekommen, um Ihre state-controller, können Sie einfach die $stateParams. Zumindest, dass Art und Weise die Besorgnis, die das fortbestehen der optionalen params ist abstrahiert aus der controller-code.

    InformationsquelleAutor Christian Yang
  3. 2

    Ich glaube, dass das, was Sie erreichen wollen, ist nicht möglich, ohne eine der beiden Lösung, die Sie zur Verfügung gestellt.

    Den browser-zurück-Taste ist einfach, um die URL-Geschichte. Er habe keine Ahnung über den ui-router internen Zustände und einfach die Kraft, die URL zu ändern.

    Zwingt die URL zu ändern, löst die interne ui-router-Maschine, aber leider auch ui-router finden Sie in der URL-änderung das gleiche als würde jemand haben, ändern Sie die url von hand.

    Ui-router Feuer eine neue route zu ändern, um die Strecke wies von der URL. Das bedeuten, dass er nicht weiß, wie Sie wollte, um zu gehen "zurück" und werde nur den Status ändern, um die neue ohne Parameter.

    Zusammenfassung

    Klick auf zurück-button ausgelöst wird, einen Zustand zu ändern, um eine neue Staat nach der URL statt wieder auf den vorherigen Zustand.

    Dies ist, warum das hinzufügen der params an die URL und das Problem lösen. Da die URL ist diskriminierend werden Sie landen schließlich auf das Land, das Sie wollten.

    Hoffe, es half.

    • Ich verstehe, kann ich nur lösen, indem diese zwei Lösungen..aus dem hinzufügen der parameter ist nicht zu bevorzugen, ich Denke, dass Durcheinander, wenn ich mehrere params..
    • Dann ist Ihr service-Lösung kann der eine sein.
    • ja..aber ich Suche nach etwas, das abgesehen, was ich denke..es muss einen Weg..das ist I"m fehlt..
    InformationsquelleAutor Okazari
  4. 0

    Das klingt für mich als X-Y-problem. Es gibt empfohlene Wege, um Staatliche params persistent in der Erwägung, dass das problem liegt aus dieser Oberfläche.

    Durch die definition der Frage, es gibt Daten, die sollten gehalten werden, unabhängig von Staaten. So ist es Art von globaler Verhältnis zu Staaten. So sollte es werden, ein service, der hält es und Steuerungen der beiden Staaten pflegen es. Nur don ' T-pass-Daten, die aus einem Zustand des scope im Zustand params.

    Sticky Staaten passen würde dieser Ansatz leicht, da es erlaubt zu halten, DOM und $scope während ein anderer Zustand aktiv ist. Aber es hat nichts zu tun mit Staat params, wenn der Staat wieder aktiv.

    • Könnten Sie mir ein Beispiel mit klebrigen Staaten.. ich habe es versucht, aber das funktionierte nicht für mich..Danke 🙂
    • Sicher Ding. Für diesen Fall benötigen Sie sogar keinen klebrigen Staaten von ui-router-extras. Lassen Sie mich wissen, wenn Sie Hilfe benötigen mit einem komplizierteren Szenario (die ich Wette, Sie haben für den eigentlichen Zweck)
    • Die plunkr Sie gemacht hatte, folgte eine Vorgehensweise, die Beratungskonzept aus, die ich vorgeschlagen, in meiner Frage selbst
    • dies ist wirklich der optimale Ansatz für diese Aufgabe und ich habe erklärt, warum. Die klebrige Lösung würde so Aussehen dieser. Ihr problem war die Tatsache, dass die sticky-Staaten einnehmen sollte eine verschiedenen Namen ui-Ansicht. Dieser Ansatz jedoch nicht übertragen params in account beim Klick im Menü.
    InformationsquelleAutor Kirill Slatin
Schreibe einen Kommentar