Ich habe eine Liste von Profilen, in denen jedes Profil entweder in einer Zusammenfassung oder in einer Detailansicht sein kann. Nur ein Profil kann jederzeit eine Detailansicht haben.
profiles.html
%Vor%profile-summary.html
%Vor%Profilzusammenfassung-Controller.js
%Vor%Profildetails .html
%Vor%profil-details-controller.js
%Vor%UI-Router-Konfiguration
%Vor%Fragen, die ich habe:
ProfileDetailsCtrl 3 Mal instanziiert. Wie kann ich es nur für ein Profil instanziieren, das erweitert wurde? Nach der Diskussion in den Kommentaren unten gibt es eine andere Lösung für das grundlegende (erforderlich) Konzept:
Innerhalb einer Liste - Wie man eine Zeile ersetzt (auf-klicken) , mit mehr Details - mit
ui-router?
i.e. Fangen wir damit an:
wird erhalten, wenn More 2 angeklickt wird (ang wird zurückgeholt, wenn Less 2 als nächstes geklickt wird)
Dies wäre die Lösung:
1) Die Listenansichtsvorlage hätte ng-if und überprüft, ob detail Info vorhanden ist oder nicht:
Ein paar interessante Teile zu erwähnen: anstelle von ng-click verwenden wir nur die eingebaute ui-sref mit einem relativen Pfad def ui-sref=".profile({profileId:profile.id})" - Das ruft den Child-Status profile auf.
Sobald das Kind geladen ist, können wir einfach zurückkommen, indem wir das Elternelement ui-sref="." (wow ...)
2) Unser detail Zustand wird zwei Dinge tun
bereinigen bei verlassen // Wiederherstellen der Liste wie es war
// Suche ein Profil aus der übergeordneten Sammlung var profile = _.find ($ scope.profiles, {id: $ stateParams.profileId});
$ http .get ("detail.json") // getById .then (Funktion (Antwort) {
%Vor%// Aufräumen - entfernen Sie die Details var cleanup = funktion () { Profil löschen .detail; } $ scope. $ on ("$ destroy", Bereinigung);
Ein paar Dinge, die wir erwähnen sollten: Wir greifen das $scope -Ereignis "destroy" an. Dies wird ausgelöst, sobald wir zum Elternteil zurückkehren. Und das ist der Ort, an dem wir alle Footprints säubern, die während des ui-router detail Zustands-Roundtrips gemacht wurden ...
3) die Detailansicht
Es gibt KEINE. Keine, weil wir keine Vorlage benötigen. Nun, wir brauchen noch den View-Anker, wo ist der Detail-State platziert ... und der DetailController heißt!
Also muss der View-Anker irgendwo im Parent stehen:
%Vor%Arbeitscode Beispiel :
Schauen Sie sich diese Lösung hier an ... sollte klar sein
(unten ist der ursprüngliche Teil der Antwort, warum mehrfach gefeuerter Controller)
Der Controller wird so oft instanziiert, wie oft seine Ansicht in die Seite eingefügt wird. Und Sie injizieren die Ansicht dreimal .
Hier ist die Quelle der Profile
%Vor% Hier erstellen wir Anker / Ziele mit demselben ui-view name:
Und schließlich bitten wir, unsere Ansicht in diese (3) Eltern / Kind view-targets zu injizieren:
%Vor% Lösung: Dies sollte nicht passieren. Wir sollten nicht ein ui-view="viewName" moret als einmal verwenden. Es funktioniert. aber es ist nicht das, was wir richtig verwalten können ... einfach die Ziele aus dem Repeater bewegen ...
EXTEND Hier habe ich den bottle aktualisiert, ich habe die profiles.html so gemacht
%Vor%Und ich wiederhole die Zusammenfassung:
%Vor% So, jetzt ist jeder ui-view da nur einmal ... sieht das in Aktion hier
Tags und Links angularjs angular-ui-router