AngularJS ui-router $ state.go ('^') Ändert nur die URL in der Adresszeile, aber nicht den Controller

8

Ich versuche eine "Todo App" mit angularjs ui-router zu erstellen. Es hat 2 Spalten:

  • Spalte 1: Liste von Todos
  • Spalte 2: Todo-Details oder Todo-Bearbeitungsformular

In der Edit und Create Controller nach dem Speichern der Todo möchte ich die Liste neu laden, um die entsprechenden Änderungen anzuzeigen. Das Problem: Nach dem Aufruf von $state.go('^') beim Erstellen oder Aktualisieren des Todos ändert sich die URL im Browser wieder in /api/todo , aber die ListCtrl wird nicht ausgeführt, dh $scope.search wird nicht aufgerufen, daher die Todo-Liste (mit der geänderte Elemente) wird nicht abgerufen, noch werden die Details des ersten Todo in Spalte 2 angezeigt (stattdessen wird es leer).

Ich habe sogar $state.go('^', $stateParams, { reload: true, inherit: false, notify: false }); probiert, kein Glück.

Wie kann ich einen Zustandsübergang durchführen, damit der Controller schließlich ausgeführt wird?

Quelle:

%Vor%     
Adam Szabo 23.01.2014, 13:19
quelle

3 Antworten

5

Vielen Dank für Radim Köhler, dass er $scope geerbt hat. Mit 2 kleinen Änderungen habe ich das gelöst. Siehe unten Code, ich kommentiert, wo ich die zusätzlichen Zeilen hinzugefügt habe. Jetzt funktioniert es wie ein Zauber.

%Vor%     
Adam Szabo 25.01.2014, 11:10
quelle
5

Ich würde ein Beispiel geben (ein Entwurf) von wie edit in detail verschachteln. Nun, zuerst lassen Sie uns die Vorlagen ändern.

Die Vorlage Detail enthält die vollständige Definition des Details. Außerdem enthält es jetzt das Attribut ui-view="editView" . Dadurch wird sichergestellt, dass bearbeiten das Detail aus der Sichtbarkeitsperspektive "ersetzt", während der Bearbeitungsbereich alle erbt > Details Einstellungen. Das ist die Stärke von ui-router

%Vor%

Lassen Sie uns zweitens das Bearbeiten state in das Detail

verschieben %Vor%

Wenn Sie dieses angepasste state und template Mapping haben, haben wir eine Menge. Jetzt können wir vom ui-router mit voller Kraft profitieren.

Wir werden einige Methoden in DetailCtrl definieren (denken Sie daran, dass sie im ererbten Edit-Status verfügbar sein sollen)

%Vor%

OK, es sollte jetzt klar sein, dass wir ein model mit dem Element model.todos und seinem Backup model.original haben.

Der Edit-Controller könnte zwei Aktionen haben: Save() und Cancel()

%Vor%

Das sollte eine Vorstellung davon geben, wie man zwischen den Eltern / Kind-Zuständen navigieren und reloaden erzwingen kann.

HINWEIS, anstelle von Angular.copy () verwende ich lo-dash _.cloneDeep() , aber beides sollte funktionieren

    
Radim Köhler 25.01.2014 06:43
quelle
3

Ich hätte vielleicht ein ähnliches Problem gehabt. Der Ansatz, den ich gewählt habe, war, $location.path(data.path).search(data.search); zu verwenden, um die Seite umzuleiten, und dann habe ich im $ controller das Ereignis $ locationChangeSuccess abgefangen. Mit anderen Worten benutze ich $location.path(...).search(...) als $state.go(...) und fing dann das $ locationChangeSuccess-Ereignis ein, das ausgelöst wird, wenn die Position geändert wird, bevor die Route übereinstimmt und der Controller aufgerufen wird.

%Vor%

Das $ locationChangeSuccess-Ereignis tritt auf, bevor die Route übereinstimmt und der Controller aufgerufen wird

    
Warrenn enslin 23.01.2014 13:28
quelle