AngularJS: les données passent d'une vue à l'autre avec au même contrôleur

Question

Résumé:

J'ai une forme en vue (first) de ma demande angulaire et sur la réponse de la réussite de l'appel ajax sur le soumettre redirige l'utilisateur vers la vue (second). Il n'y a qu'un seul contrôleur pour l'application (for all view). Ici, l'utilisateur peut entrer dans les champs sous la forme de la vue (first) qui devrait s'afficher sur la vue (second) & encore, il y a une forme dans la vue (second) où l'utilisateur peut entrer dans les champs sous la forme qui devrait s'afficher sur la vue (third).

Comme toutes les vues (first,second,third) partageant le même contrôleur function.I créé un service à set&get les données d'une vue à l'autre et utiliser ce service à travers l'application pour envoyer les données d'une vue à une autre vue du partage le même contrôleur.

Énoncé du problème:

Je ne suis pas en mesure de stocker chaque données de formulaire dans une variable séparée que je reçois les données du même service dans toute l'application.

Schéma:

Comme les services sont singletons dans angulaire. Ainsi, quand j'appelle une méthode dataService.setData() du contrôleur il enlève les données stockées précédentes dans le service et a mis à jour avec un nouveau qui crée un problème pour moi. Je veux stocker toutes les données de vues séparément au lieu de remplacer les unes avec les autres.

Answer 1

En vous son contrôleur créer des clés pour chaque point de vue différent, permet de dire:

this.keys = { 
    "firstView": "firstView", 
    "secondView": "secondView", 
    "thirdView": "thirdView", 
} 

et quand vous appelez la méthode setData, recevez le data à stocker et key, permet de dire

dataService.setData(data, keys.firstView) 

et de mettre à jour votre getData de sorte que vous pouvez choos e les données que vous souhaitez obtenir comme ce

dataService.getData(keys.firstView) 

Maintenant, votre DATASERVICE doit ressembler à ceci:

angular.module('app').service('dataService', function() { 
    var s = {}; 
    function setData(data, key){ 
     s[key] = data; 
    } 

    function getData(key){ 
     return s[key]; 
    } 
}) 

Answer 2

Utilisez une usine avec une valeur 'enregistrée' comme ceci. Ajoutez un identifiant pour chaque vue, de sorte qu'il fonctionne comme une table de hachage.

.factory('storeValue', function() { 
    var valueStored= {}; 
    return { 
     getValue: function(viewId) { 
      return valueStored[viewId]; 
     }, 
     setValue: function(newValue,viewId) { 
      valueStored[viewId] = newValue 
     } 
     deleteOrder: function(viewId) { 
      delete valueStored[viewId]; 
     } 
    }; 
}) 

Supposons que c'est le contrôleur pour un de vos vues, et a comme dépendance de l'usine au-dessus

$scope.setData = function(){ 
    storeValue.setValue('value for First View', $state.current.name); 
} 

$scope.getData = function(){ 
    storeValue.getValue($state.current.name); // This will return the String 'value for First View' 
} 

, vous allez définir une valeur et un identificateur pour la première vue. L'objet $ state qui représente la vue en cours fonctionnera comme un identifiant de la vue correspondante. Et vous pourriez faire la même chose pour le reste de votre vue, sans perdre de données.

Answer 3

Si vous utilisez ui-router vous pouvez utiliser les params pour transmettre des données à partir d'un état à un autre état.

Ainsi, par exemple vos trois états (plus un parent abstrait):

$stateProvider.state('parent', { 
    abstract: true, 
    param: { 
    propertyOne: null, 
    propertyTwo: null 
    } 
}) 
.state('parent.first', { 
    controller: YourController, 
    params: { 
    propertyOne: null, 
    propertyTwo: null 
    } 
}) 
...repeat for all the other states you want with the params 

Puis, quand submit() et vous est congédié peut appeler le state.go $, vous pouvez transmettre les variables:

$state.go("seconds", { propertyOne: 'one', propertyTwo: 'two' }, { inherit:false }); 

Answer 4

La solution la plus simple et la plus intelligente consiste à utiliser la relation parent-enfant de la portée dans AngularJS. Il est plus puissant que d'utiliser un service pour stocker des données de vue.

Supposons que vous ayez un contrôleur parent. Sous le contrôleur parent, vous avez les contrôleurs enfants comme firstStepCtrl, secondStepCtrl, thirdStepCtrl et etc. Les données du contrôleur parent seront partagées entre les contrôleurs enfant . Ainsi, si vous définissez un modèle sur le contrôleur parent et que vous liez ce modèle dans les contrôleurs enfants, il restera stocké dans le contrôleur parent lors de la navigation entre les étapes.

code Exemple

$scope.model={ 
    firstStep:{}, 
    SecondStep:{}, 
    thirdStep:{} 
    currentStep:0, 
    steps:['step1','step2','step3'] 
} 



<div ng-controller="parentCtrl"> 

<div ng-include="model.steps[currentStep]"> 
</div> 

</div> 


<script type="text/ng-template" id="step1"> 
<div ng-controller="firstStepCtrl"> 
<h1>Step 1</h1> 
<input type"text" ng-model="model.firstStep.name"/> 
</div> 
</script> 

<script type="text/ng-template" id="step2"> 
<div ng-controller="secondStepCtrl"> 
<h1>Step 2</h1> 
<input type"text" ng-model="model.SecondStep.name"/> 
</div> 
</script> 


<script type="text/ng-template" id="step3"> 
<div ng-controller="thirdStepCtrl"> 
<h1>Step 3</h1> 
<input type"text" ng-model="model.thirdStep.name"/> 
</div> 
</script> 

Comme vous pouvez le voir tous les modèles étape est enregistré dans le contrôleur parent et vous pouvez y accéder facilement. J'ai utilisé ng-include au lieu de ui-router. Vous pouvez incrémenter décrément currentStep pour la navigation.

Espérons que ça aide.