Angularjs, passender Spielraum zwischen Wegen

Ich habe eine Situation mit einer Form, die sich über mehrere Seiten erstreckt (vielleicht nicht ideal, aber so ist es). Ich möchte einen Bereich für das gesamte Formular haben, der im Verlauf ausgefüllt wird. Wenn der Benutzer zwischen den Schritten hin und her wechselt, ist es leicht, sich den Zustand zu merken.

Also muss ich in sehr Pseudo-Code tun:

  1. Setzen Sie $scope.val =
  2. Klicken Sie auf einen Link und werden Sie zu einer neuen Vorlage weitergeleitet (wahrscheinlich mit demselben Controller).
  3. $scope.val sollte immer noch den gleichen Wert haben wie auf der letzten Seite.

Gibt es irgendwie persistente Daten für den Bereich, um den richtigen Weg zu gehen, oder gibt es einen anderen Weg? Können Sie sogar einen Controller erstellen, der zwischen den Routen einen persistenten Bereich hat, außer natürlich in einer database zu speichern?

Sie müssen einen Dienst verwenden, da ein Dienst während des gesamten Lebens Ihrer App bestehen bleibt.

Nehmen wir an, Sie möchten Daten zu einem Benutzer speichern

So definieren Sie den Service:

 app.factory("user",function(){ return {}; }); 

In Ihrem ersten Controller:

 app.controller( "RegistrationPage1Controller",function($scope,user){ $scope.user = user; // and then set values on the object $scope.user.firstname = "John"; $scope.user.secondname = "Smith"; }); app.controller( "RegistrationSecondPageController",function($scope,user){ $scope.user = user; // and then set values on the object $scope.user.address = "1, Mars"; }); 

Der Dienst funktioniert, aber eine logische Möglichkeit, dies nur mit normalen Bereichen und Controllern zu tun, besteht darin, die Controller und Elemente so einzurichten, dass sie die Struktur Ihres Modells widerspiegeln. Insbesondere benötigen Sie ein übergeordnetes Element und einen Controller, die einen übergeordneten Bereich festlegen. Die einzelnen Seiten des Formulars sollten sich in einer Ansicht befinden, die dem übergeordneten Element untergeordnet ist. Der übergeordnete Bereich bleibt bestehen, auch wenn die untergeordnete Ansicht aktualisiert wird.

Ich nehme an, Sie verwenden Ui-Router, so dass Sie benannte Ansichten geschachtelt haben können. Dann im Pseudocode:

 

Dann definiert WizardController die Bereichsvariablen, die Sie in den Schritten des mehrseitigen Formulars (das ich als “Assistent” bezeichne) beibehalten möchten. Dann aktualisieren Ihre Routen nur stepView . Jeder Schritt kann seine eigenen Vorlagen, Controller und Bereiche haben, aber ihre Bereiche gehen von Seite zu Seite verloren. Die Bereiche in WizardController bleiben jedoch auf allen Seiten erhalten.

Um die WizardController-Bereiche von den untergeordneten Controllern zu aktualisieren, müssen Sie die Syntax $scope.$parent.myProp = 'value' oder definieren Sie eine function setMyProp für jede setMyProp in WizardController. Wenn Sie andernfalls versuchen, die übergeordneten Bereichsvariablen direkt von den untergeordneten Controllern aus zu setzen, erstellen Sie am Ende nur eine neue Bereichsvariable für das untergeordnete Element und überschreiben die übergeordnete Variable.

Etwas schwer zu erklären und ich entschuldige mich für das Fehlen eines vollständigen Beispiels. Grundsätzlich möchten Sie einen übergeordneten Controller, der einen übergeordneten Bereich festlegt, der auf allen Seiten Ihres Formulars beibehalten wird.

Die Daten können auf zwei Arten zwischen Controllern ausgetauscht werden

  1. $rootScope
  2. Modell

Das folgende Beispiel veranschaulicht die Weitergabe von Werten mithilfe des Modells

app.js

 angular.module('testApp') .controller('Controller', Controller) .controller('ControllerTwo', ControllerTwo) .factory('SharedService', SharedService); 

SharedService.js

 function SharedService($rootScope){ return{ objA: "value1", objB: "value2" } } 

// Ändern Sie den Wert in Controller A

Controller.js

 function Controller($scope, SharedService){ $scope.SharedService = SharedService; $scope.SharedService.objA = "value1 modified"; } 

// Greifen Sie auf den Wert in controllertwo zu

ControllerTwo.js

 function ControllerTwo($scope, SharedService){ $scope.SharedService = SharedService; console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified" } 

Hoffe das hilft.