it-swarm.com.de

Winkel, die den Bereich zwischen den Routen überschreiten

Ich habe eine Situation mit einem Formular, das sich über mehrere Seiten erstreckt (vielleicht nicht ideal, aber so ist es). Ich möchte einen Bereich für das gesamte Formular haben, der während des Vorgangs ausgefüllt wird. Wenn der Benutzer zwischen den Schritten hin und her wechselt, ist es einfach, sich den Status zu merken.

Also muss ich im Pseudocode folgendes tun:

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

Sind irgendwie persistente Daten für den Umfang 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 aufweist, außer natürlich, um ihn in einer Datenbank zu speichern?.

88
Erik Honn

Sie müssen einen Dienst verwenden, da dieser während der gesamten Lebensdauer 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";

    });
138
ganaraj

Der Dienst funktioniert, aber eine logische Möglichkeit, nur normale Bereiche und Controller zu verwenden, 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 gehe davon aus, dass Sie i-router verwenden, damit Sie verschachtelte benannte Ansichten haben können. Dann im Pseudocode:

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

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 über eigene Vorlagen, Controller und Bereiche verfügen, deren Bereiche jedoch von Seite zu Seite verloren gehen. Die Bereiche in WizardController bleiben jedoch auf allen Seiten erhalten.

Um die WizardController-Bereiche von den untergeordneten Controllern zu aktualisieren, müssen Sie eine Syntax wie $scope.$parent.myProp = 'value' Verwenden oder für jede Bereichsvariable eine Funktion setMyProp in WizardController definieren. Wenn Sie andernfalls versuchen, die übergeordneten Bereichsvariablen direkt von den untergeordneten Controllern aus festzulegen, erstellen Sie lediglich eine neue Bereichsvariable für das untergeordnete Element 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.

9
tksfz

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

  1. $rootScope
  2. Modell

Das folgende Beispiel zeigt die Übergabe von Werten anhand 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.

5
DILIP KOSURI