Angularjs, en passant portée entre les routes

Question

J'ai une situation avec une forme qui s'étend sur plusieurs pages (peut-être pas idéal, mais c'est la façon dont il est). J'aimerais avoir un champ d'application pour l'ensemble de la forme qui se remplit au fur et à mesure, de sorte que si l'utilisateur va-et-vient entre les étapes, c'est facile à retenir l'état.

J'ai donc besoin de le faire, en très-pseudo-code:

 1. Set $scope.val = <Some dynamic data> 
 2. Click a link and be routed to a new template (probably with the same controller). 
 3. $scope.val should still be the same value as it was on the last page.

Est en quelque sorte la persistance des données pour le champ d'application de la bonne façon d'aller à ce sujet, ou est-il un autre moyen? Vous pouvez même créer un contrôleur qui a persisté portée entre les routes, sauf pour l'enregistrer dans une base de données de cours.

Answer 1

Vous avez besoin d'utiliser un service depuis un service de persister tout au long de votre application vie.

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

C'est la façon dont 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";

    });

Answer 2

Tout comme un ajout à ganaraj:

Vous trouverez ici un blog vraiment sympa entrée avec un screencast sur la façon d'obtenir les différents contrôleurs de communiquer. Il ya aussi un couple de jsfiddles à jouer avec.

http://onehungrymind.com/angularjs-communicating-between-controllers/

J'espère que cela aide.

Answer 3

Le service fonctionnera, mais d'une façon logique de le faire en utilisant uniquement les champs d'application et des contrôleurs est de mettre en place vos contrôleurs et les éléments de sorte qu'il reflète la structure de votre modèle. En particulier, vous avez besoin d'un élément parent et contrôleur établir un parent. Les différentes pages de ce formulaire doit résider dans une vue qui est un enfant de la mère. La portée parent persiste même que la vue enfant est mis à jour.

Je suppose que vous êtes à l'aide de l'interface utilisateur du routeur de sorte que vous pouvez avoir imbriqués nommé vues. Puis, en pseudo-code:

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

Puis WizardController définit la portée des variables que vous souhaitez conserver à travers les étapes de la multi-formulaire de la page (dont je fais référence à un "assistant"). Ensuite, votre parcours sera mise à jour, stepView seulement. Chaque étape peut avoir ses propres modèles, des contrôleurs et des champs, mais leurs champs d'application sont perdus à partir de la page à page. Mais les étendues dans WizardController sont conservés à travers toutes les pages.

Pour mettre à jour le WizardController étendues à partir de l'enfant contrôleurs, vous aurez besoin d'utiliser une syntaxe comme celle - $scope.$parent.myProp = 'value' ou de définir une fonction setMyProp sur WizardController pour chaque portée variable. Sinon, si vous essayez de définir la portée parent variables directement auprès de l'enfant contrôleurs, vous finirez juste de créer un nouveau champ d'application variable sur l'enfant lui-même, de l'ombre à la variable parent.

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