Angularjs, Passing Scope zwischen Routen

Ich habe eine Situation mit einem Formular, das sich über mehrere Seiten erstreckt (möglicherweise nicht ideal, aber so ist es). Ich möchte einen Bereich für das gesamte Formular haben, der im Laufe der Zeit ausgefüllt wird, damit der Benutzer sich leicht an den Status erinnert, wenn er zwischen den Schritten hin und her geht.

Also muss ich in sehr Pseudo-Code tun:

1. einstellen $scope.val = <Some dynamic data>
2. Klicken Sie auf einen Link und lassen Sie sich zu einer neuen Vorlage weiterleiten (wahrscheinlich mit demselben Controller).
3. $scope.val sollte immer noch den gleichen Wert haben wie auf der letzten Seite.

Sind persistente Daten für den Bereich der richtige Weg, um dies zu erreichen, oder gibt es einen anderen Weg? Können Sie sogar einen Controller erstellen, der einen dauerhaften Bereich zwischen Routen hat, außer natürlich in einer Datenbank zu speichern?

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

Nehmen wir an, Sie möchten Daten eines Benutzers 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 wird funktionieren, aber eine logische Methode, um nur normale Bereiche und Controller zu verwenden, besteht darin, Ihre 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 Elternteil untergeordnet ist. Der übergeordnete Bereich bleibt bestehen, auch wenn die untergeordnete Ansicht aktualisiert wird.

Ich gehe davon aus, dass Sie einen UI-Router verwenden, damit Sie benannte benannte Ansichten haben können. Dann im Pseudocode:

<div ng-controller="WizardController">
  <div name="stepView" ui-view/>
</div>

Anschließend definiert WizardController die Bereichsvariablen, die Sie in den Schritten des mehrseitigen Formulars (das ich als "Assistent" bezeichne) beibehalten möchten. Dann werden stepViewnur Ihre Routen aktualisiert . 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 aus zu aktualisieren, müssen Sie für jede Bereichsvariable $scope.$parent.myProp = 'value'eine Syntax wie oder eine Funktion setMyPropin WizardController definieren. Wenn Sie andernfalls versuchen, die übergeordneten Bereichsvariablen direkt über die untergeordneten Controller festzulegen, erstellen Sie am Ende nur eine neue Bereichsvariable für das untergeordnete Steuerelement selbst und schattieren 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 erstellt, der auf allen Seiten Ihres Formulars beibehalten wird.

Die Daten können auf zwei Arten zwischen Controllern übertragen werden

1. $rootScope
2. Modell

Das folgende Beispiel zeigt die Übergabe 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";
}

// Zugriff auf den Wert in controllerertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

Hoffe das hilft.