How to pass custom data in $state.go() in angular-ui-router?

Question

I want to pass a custom object to another state via $state.go() in UI-Router.

var obj = {
    a: 1,
    b: 2,
    fun: function() {
        console.log('fun');
    }
}
$state.go('users', obj);

But I need to run fun() in target state, so I can't pass this object in URL parameter. In target controller, I tried to fetch the value of obj via $stateParams but got empty object {}:

function UserCtrl($stateParams) {
    console.log($stateParams); // will be empty
}

So how to pass obj to state "users" correctly?

You could stringify the object and then parse on the other end: http://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router — tommyd456, May 11 '15 at 10:29
But I need to call the functions in the object in the target state. So I can't stringify the object. — victorwoo, May 11 '15 at 10:30
How were you intending to call the function if you could pass an object? — tommyd456, May 11 '15 at 10:39
You need to rethink your approach - perhaps send a simple parameter in the url and use this as a basis to decide which function to call. — tommyd456, May 11 '15 at 10:45
Use a service to share methods and data, that's what they are for — charlietfl, May 11 '15 at 11:05

score 69 · Answer 1 · answered Jan 11 '16 at 15:42

Define state with parameters like this:

$stateProvider
.state('user', {
   url: '/user',
   params: {
     obj: null
   },
   templateUrl: 'templates/user.html',
   controller: 'UserCont'
})

when calling pass parameter like this:

$state.go('user',{obj: myobj});

in the controller UserCon receive parameter like:

$state.params.obj

User $state is one of the parameter in the controller defined like

function UserCon($scope, $http, $state){

score 3 · Answer 2 · edited Aug 23 '17 at 10:10

var obj = {
   a: 1,
   b: 2,
   fun: function() {
       console.log('fun');
   }
}
$state.go('users', obj);
.....

$stateProvider
.state('user', {
   url: '/user/:obj',
   templateUrl: 'templates/user.html',
   controller: 'UserCont'
})

..... or .....

$stateProvider
.state('user', {
   url: '/user',
   params: {
     obj: null
   },
   templateUrl: 'templates/user.html',
   controller: 'UserCont'
})

.....

function UserCtrl($state) {
   console.log($state.params.obj);
}

score 0 · Answer 3 · answered Mar 12 '17 at 12:21

    //Use the method chaining mechnism as show below:
var RoutingApp = angular.module('RoutingApp', ['ui.router']);
RoutingApp.config( [ '$stateProvider', '$urlRouterProvider','$locationProvider', function( $stateProvider, $urlRouterProvider,$locationProvider ){


    $stateProvider
      .state('home', {
            url:'/home',
            templateUrl: 'template/home.html',
            controller: 'homeController as homeCtrl',
            data: {
                customDatahome1:"Home Custom Data 1",
                customDatahome2:"Home Custom Data 2"
            }
        })
        .state('courses', {
            url:'/courses',
            templateUrl: 'template/courses.html',
            controller: 'coursesController as coursesCtrl',
            data: {
                customDatacourses1:"Courses Custom Data 1",
                customDatacourses2:"Courses Custom Data 2"
            }
        })
        .state('students', {
           url:'/students',
            templateUrl: 'template/students.html',
            controller: 'studentsController'
        })
        .state('studentDetails', {
            url:'/students/:id',
            templateUrl: 'template/studentDetails.html',
            controller: 'studentDetailsController'
        });
        $urlRouterProvider.otherwise('/home');

$locationProvider.html5Mode(true);
    } ] );



RoutingApp.controller( 'homeController', function( $state ){
    var vm = this;

    vm.message = "Home Page";
    this.customDatahome1 = $state.current.data.customDatahome1;
    this.customDatahome2 = $state.current.data.customDatahome2;

    this.customDatacourses1 = $state.get('courses').data.customDatacourses1;
    this.customDatacourses2 = $state.get('courses').data.customDatacourses2;
});

RoutingApp.controller('coursesController', function($scope){
    var vm = this;
    $scope.courses = ['PHP','AngularJS','Hadoop','Java','.Net','C#'];
    console.log("Hello Courses");
});

Template:home.html

<h1 ng-controller="homeController as homeCtrl">{{homeCtrl.message}} <br> {{homeCtrl.message1}}</h1>
<div>
    Vision Academy is established in 2011 By  2 Software Engineer offer very cost effective training.
</div>
<ul>
    <li>Training Delivered by real time software experts having more than 10 years of experience </li>
    <li>Realtime Project discussion relating to the possible interview questions</li>
    <li>Trainees can attend training and use lab untill you get job</li>
    <li>Resume prepration and mock up interview</li>
    <li>100% placement asistance</li>
    <li>Lab facility</li>
</ul>
<fieldset ng-controller="homeController as homeCtrl">
    <legend>Home</legend>
    Custom Data Home 1 : {{homeCtrl.customDatahome1}}<br>
    Custom Data Home 2 : {{homeCtrl.customDatahome2}}<br>

</fieldset>

<fieldset ng-controller="homeController as homeCtrl">
    <legend>Courses</legend>
    Custom Data Courses 1 : {{homeCtrl.customDatacourses1}}<br>
    Custom Data Courses 2 : {{homeCtrl.customDatacourses2}}<br>

</fieldset>

How to pass custom data in $state.go() in angular-ui-router?

3 Answers3

Linked