Angularjs, przekazywanie zakresu między trasami

Mam sytuację z formularzem, który rozciąga się na kilka stron (może nie jest idealny, ale tak właśnie jest). Chciałbym mieć jeden zakres dla całego formularza, który jest wypełniany w miarę postępów, aby użytkownik mógł łatwo zapamiętać stan, gdy użytkownik przechodzi między krokami.

Muszę więc zrobić w bardzo pseudokodzie:

1. Zestaw $scope.val = <Some dynamic data>
2. Kliknij łącze i przejdź do nowego szablonu (prawdopodobnie z tym samym kontrolerem).
3. $scope.val Powinien nadal mieć tę samą wartość, co na ostatniej stronie.

Czy w jakiś sposób utrwalanie danych dla zakresu jest właściwym sposobem rozwiązania tego problemu, czy jest inny sposób? Czy możesz nawet utworzyć kontroler, który ma trwały zakres między trasami, z wyjątkiem oczywiście zapisywania go w bazie danych.

Musisz skorzystać z usługi, ponieważ usługa będzie trwać przez cały okres użytkowania aplikacji.

Powiedzmy, że chcesz zapisać dane dotyczące użytkownika

Tak definiujesz usługę:

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

W swoim pierwszym kontrolerze:

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";

    });

Usługa będzie działać, ale logicznym sposobem na zrobienie tego przy użyciu tylko zwykłych zakresów i kontrolerów jest skonfigurowanie kontrolerów i elementów tak, aby odzwierciedlały strukturę Twojego modelu. W szczególności potrzebny jest element nadrzędny i kontroler, które ustanawiają zakres nadrzędny. Poszczególne strony formularza powinny znajdować się w widoku będącym dzieckiem rodzica. Zakres nadrzędny utrzymuje się nawet po zaktualizowaniu widoku podrzędnego.

Zakładam, że używasz routera ui, więc możesz mieć zagnieżdżone nazwane widoki. Następnie w pseudokodzie:

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

Następnie WizardController definiuje zmienne zakresu, które chcesz zachować na kolejnych etapach wielostronicowego formularza (który nazywam „kreatorem”). Wtedy Twoje trasy zostaną zaktualizowane stepView. Każdy krok może mieć własne szablony, kontrolery i zakresy, ale ich zakresy są tracone ze strony na stronę. Ale zakresy w WizardController są zachowywane na wszystkich stronach.

Aby zaktualizować zakresy WizardController z kontrolerów podrzędnych, musisz użyć składni takiej jak $scope.$parent.myProp = 'value'lub zdefiniować funkcję setMyPropw WizardController dla każdej zmiennej zakresu. W przeciwnym razie, jeśli spróbujesz ustawić zmienne zakresu nadrzędnego bezpośrednio z kontrolerów podrzędnych, w końcu utworzysz nową zmienną zakresu na samym dziecku, cieniując zmienną nadrzędną.

Trochę trudne do wyjaśnienia i przepraszam za brak pełnego przykładu. Zasadniczo potrzebujesz kontrolera nadrzędnego, który ustanawia zakres nadrzędny, który zostanie zachowany na wszystkich stronach formularza.

Dane mogą być przekazywane między administratorami na dwa sposoby

1. $rootScope
2. Model

Poniższy przykład ilustruje przekazywanie wartości za pomocą modelu

app.js

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

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

// Zmodyfikuj wartość w kontrolerze A

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

 $scope.SharedService.objA = "value1 modified";
}

// Uzyskaj dostęp do wartości w controllerertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

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

Mam nadzieję że to pomoże.