Angularjs, passer la portée entre les routes

J'ai une situation avec un formulaire qui s'étend sur plusieurs pages (ce n'est peut-être pas idéal, mais c'est comme ça). J'aimerais avoir une portée pour l'ensemble du formulaire qui se remplit au fur et à mesure, de sorte que si l'utilisateur fait des va-et-vient entre les étapes, il est facile de se souvenir de l'état.

Je dois donc faire, en très pseudo-code:

1. Ensemble $scope.val = <Some dynamic data>
2. Cliquez sur un lien et être dirigé vers un nouveau modèle (probablement avec le même contrôleur).
3. $scope.val devrait toujours avoir la même valeur que sur la dernière page.

Les données persistantes pour la portée sont-elles en quelque sorte la bonne façon de procéder, ou y a-t-il une autre façon? Pouvez-vous même créer un contrôleur qui a une portée persistante entre les routes, sauf pour l'enregistrer dans une base de données bien sûr.

Vous devez utiliser un service car un service persistera tout au long de la vie de votre application.

Disons que vous souhaitez enregistrer les données relatives à un utilisateur

Voici comment vous définissez le service:

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

Dans votre premier contrôleur:

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

    });

Le service fonctionnera, mais une manière logique de le faire en utilisant uniquement des portées et des contrôleurs ordinaires consiste à configurer vos contrôleurs et éléments de manière à ce qu'ils reflètent la structure de votre modèle. En particulier, vous avez besoin d'un élément parent et d'un contrôleur qui établissent une portée parent. Les pages individuelles du formulaire doivent résider dans une vue qui est un enfant du parent. L'étendue parent persiste même lorsque la vue enfant est mise à jour.

Je suppose que vous utilisez ui-router afin que vous puissiez avoir des vues nommées imbriquées. Puis en pseudo-code:

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

Ensuite, WizardController définit les variables de portée que vous souhaitez conserver à travers les étapes du formulaire multi-pages (que je qualifie d '«assistant»). Ensuite, vos itinéraires seront mis à jour stepViewuniquement. Chaque étape peut avoir ses propres modèles, contrôleurs et étendues, mais leurs étendues sont perdues de page en page. Mais les étendues de WizardController sont conservées sur toutes les pages.

Pour mettre à jour les étendues WizardController à partir des contrôleurs enfants, vous devez utiliser une syntaxe similaire à celle-ci $scope.$parent.myProp = 'value'ou définir une fonction setMyPropsur WizardController pour chaque variable d'étendue. Sinon, si vous essayez de définir les variables de portée parent directement à partir des contrôleurs enfants, vous finirez par créer simplement une nouvelle variable de portée sur l'enfant lui-même, en ombrant la variable parente.

Un peu difficile à expliquer et je m'excuse pour le manque d'exemple complet. Fondamentalement, vous voulez un contrôleur parent qui établit une portée parent, qui sera préservée sur toutes les pages de votre formulaire.

Les données peuvent être transmises entre les contrôleurs de deux manières

1. $rootScope
2. Modèle

L'exemple ci-dessous montre le passage de valeurs à l'aide du modèle

app.js

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

SharedService.js

function SharedService($rootScope){

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

// Modifier la valeur dans le contrôleur A

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

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

// Accéder à la valeur dans controllertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

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

J'espère que cela t'aides.