web-dev-qa-db-fra.com

Passer l'objet comme paramètre dans $ state.go

Je veux naviguer vers un autre état/écran et passer un simple objet json à cet écran suivant.

J'ai ce qui suit:

var benefit = { "x": "y"};
$state.go('pages.claimed', { 'benefit': benefit });

Mon état ressemble à ceci:

.state('pages.claimed', {
  url: '/claimed',
  views: {
    'page': {
      templateUrl: 'templates/pages/claimed.html'
    }
  }
})

Je ne peux cependant pas accéder à l'objet/paramètre "avantage" dans la vue pages.claimed. J'utilise le cadre ionic basé sur angulaire.

Merci de m'avoir pointé dans la bonne direction!

angularjsionic-frameworkangular-routing
20
Jorre

Analyser l'objet vers json: 

var benefit = angular.toJson({ "x": "y"});

Définissez la variable dans les paramètres d'état: 

.state('pages.claimed', {
   url: '/claimed?params',
   views: {
     'page': {
       templateUrl: 'templates/pages/claimed.html'
     }
   }
})

Accès à la variable depuis le contrôleur via $stateParams:

var benefit = angular.fromJson($stateParams.benefit);

ici doc complet

Modifier:

Il existe plusieurs façons de passer un objet au contrôleur à partir de l'URL:

Via les paramètres de requête:

définir les options url: '/yoururl?a&b&c',

passer des variables yoururl?a=1&b=2&c=3

Via les paramètres url:

définir les options url: '/yoururl/:a/:b/:c',

passer des variables yoururl/1/2/3

Pour les situations plus compliquées, vous pouvez analyser votre objet en chaîne json et l'encoder avec base64

Objet: { a:1, b:2, c:3 } Chaîne JSON: {"a":1,"b":2,"c":3} Chaîne codée Base64: eyJhIjoxLCJiIjoyLCJjIjozfQ==

définir les options url: '/yoururl?params'

passer des variables yoururl?params=eyJhIjoxLCJiIjoyLCJjIjozfQ==

Plus info sur base64

15
Umidbek Karimov

$ state.go devrait être corrigé comme ceci

var benefit = { "x": "y"};
$state.go('pages.claimed', { benefit: benefit });

.state devrait être comme ça

.state('pages.claimed', {
  url: '/claimed',
  params: { benefit: null },
  views: {
    'page': {
      templateUrl: 'templates/pages/claimed.html'
    }
  }
})

Attrapez l'objet passé comme suit dans le contrôleur suivant

(function () {
    'use strict';

    angular.module('YourAppName').controller('ControllerName', ['$stateParams', ControllerName]);

    function ControllerName($stateParams) {
                var vm = this;
        vm.variableToBind = $stateParams.benefit;
    };
})();
9
Chinthaka Suren Fernando

Solution très propre:

app.js:

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: { obj: null }
})

controllers.js

function UserCtrl($stateParams) {
    console.log($stateParams);
}

Puis à partir de tout autre contrôleur:

$state.go('users', {obj:yourObj});
3
askilondz

Je ne suis pas sûr de ce que fait votre application, mais si vous avez besoin de partager des informations entre deux contrôleurs, vous devez utiliser une sorte de service, sans passer un tas de données via l'URL. L'URL consiste à transmettre des paramètres pour identifier l'état, et non pas le moyen de transport des données.

Vous allez probablement vouloir une sorte d'usine. Voici un petit service d'enregistrement des avantages ... en supposant que le soulignement.

.factory('benefitsService', ['_', function(_){
    function BenefitsService(){
        this.benefits = [{
           id: 'benefit1',
           x: 100,
           y: 200
        },{
           id: 'benefit2',
           x: 200, 
           y: 300
        }];
    }

    // use this to register new benefits from a controller, other factory, wherever.
    BenefitsService.prototype.addBenefit = function(benefit){
        this.benefits.Push(benefits);
    }

    BenefitsService.prototype.findById = function(id){
        return _.findWhere(this.benefits, {id: id});
    }

    return new BenefitsService();
}]);


.run(['benefitsService', function(benefitsService){
     // we're going to register another benefit here to show usage....
     benefitsService.addBenefit({
        id: 'addedBenefit', 
        x: 2000, 
        y: 4000
     });
}])

Ensuite, vous passez simplement l'ID via l'URL à quelque chose de normal "/ url /: id" .controller ('firstController', ['$ state', function ($ state) {$ state.go ('stateId', {id: 'addedBenefit'});});

// et utilisez votre service injecté pour trouver vos données.

.controller('secondController', ['$state', 'benefitService', function($state, benefitService){
    var benefit = benefitService.findById($state.params.id); 
    // and you're home!
}]);

De cette façon, vous ne vous retrouvez pas avec un tas de cruches à l'intérieur de votre URL, seulement ce dont vous avez besoin pour identifier l'état. Vous avez également obscurci le mécanisme de stockage, vous pouvez donc utiliser un objet, un stockage local ou tout mécanisme de stockage synchrone que vous souhaitez.

Vous disposez également d'un service que vous pouvez injecter et utiliser n'importe où ailleurs via votre application.

3
sammysounder

Il semble que vous ayez manqué le paramètre "données" dans votre état:

.state('pages.claimed', {
    url: '/claimed',
    views: {
      'page': {
        templateUrl: 'templates/pages/claimed.html'
      }
    },
    data: {
      benefit: {}
    }
  })

Voici la description de documentation

1
punov