web-dev-qa-db-fra.com

Angularjs, passerelle entre les routes

J'ai un problème avec un formulaire qui s'étend sur plusieurs pages (ce n'est peut-être pas idéal, mais c'est comme ça). J'aimerais que le formulaire entier soit rempli au fur et à mesure, de sorte que, si l'utilisateur fait des va-et-vient entre les étapes, il soit facile de se souvenir de l'état.

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

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

Est-ce que, d'une manière ou d'une autre, les données concernant l'étendue sont la bonne façon de procéder, ou existe-t-il un autre moyen? Pouvez-vous même créer un contrôleur qui a une étendue persistante entre les itinéraires, sauf pour l'enregistrer dans une base de données bien sûr.

scoperoutesangularjscontrollers
88
Erik Honn

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

Disons que vous voulez sauvegarder 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";

    });
138
ganaraj

Le service fonctionnera, mais une façon logique de le faire en utilisant uniquement des étendues et des contrôleurs ordinaires consiste à configurer vos contrôleurs et vos é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. La portée parent persiste même lorsque la vue enfant est mise à jour.

Je suppose que vous utilisez i-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 d'étendue que vous souhaitez conserver tout au long des étapes du formulaire multipage (que j'appelle un "assistant"). Ensuite, vos routes ne mettront à jour que stepView. Chaque étape peut avoir ses propres modèles, contrôleurs et étendues, mais leurs étendues sont perdues de page en page. Mais les portées de WizardController sont préservées sur toutes les pages.

Pour mettre à jour les étendues WizardController à partir des contrôleurs enfants, vous devez utiliser une syntaxe telle que $scope.$parent.myProp = 'value' ou définissez une fonction setMyProp sur WizardController pour chaque variable d’étendue. Sinon, si vous essayez de définir les variables d'étendue parent directement à partir des contrôleurs enfants, vous finirez par créer une nouvelle variable d'étendue sur l'enfant lui-même, en observant la variable parent.

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

9
tksfz

Les données peuvent être transmises entre 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.

5
DILIP KOSURI