Pass object as parameter in $state.go

Question

I want to navigate to another state/screen and pass a simple json object to this next screen.

I have the following:

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

My state looks like this:

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

I can't however access the "benefit" object/parameter in the pages.claimed view. I'm using the ionic framework based on angular.

Answer 1

Parse object to json:

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

Define variable in state params:

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

Access to variable from controller via $stateParams:

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

Here full doc

Edit:

There are several ways to pass an object to controller from url:

Via query params:

define options url: '/yoururl?a&b&c',

pass variables yoururl?a=1&b=2&c=3

Via url params:

define options url: '/yoururl/:a/:b/:c',

pass variables yoururl/1/2/3

For more complicated situations you can parse your object to json string and encode it with base64

Object: { a:1, b:2, c:3 } JSON String: {"a":1,"b":2,"c":3} Base64 Encoded string: eyJhIjoxLCJiIjoyLCJjIjozfQ==

define options url: '/yoururl?params'

pass variables yoururl?params=eyJhIjoxLCJiIjoyLCJjIjozfQ==

More info about base64

Answer 2

$state.go should be corrected like this

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

.state should be like this

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

Catch the passed object as follows in the next controller

(function () {
    'use strict';

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

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

Answer 3

Very clean solution:

app.js:

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

controllers.js

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

Then from any other controller:

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