Passing an object using $state.go in AngularJS

Question

I'm new to AngularJS and I'm developing a small contacts app using AngularJS and Material Design. I'd like to pass an object (using ng-click) containing several fields to a different state using $state.go.

My HTML looks like this:

<md-list-item class="md-2-line" ng-repeat="c in contacts" > <img src="../img/user.svg" class="md-avatar"/> <div class="md-list-item-text" ng-click="goToContactInfo(c)" >

My JS code:

app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider // configure "contacts" page .state('contacts', { url: "/contacts", templateUrl: "contacts.html", controller: function ($scope, $state) { $scope.contacts = [ { name: "aaa", phone: "555555" }, { name : "bbb" , phone: "666666"} ]; $scope.goToContactInfo = function (contact) { $state.go("contactInfo", contact); }; } }) // configure "contactInfo" page .state('contactInfo', { url: "/contactInfo", templateUrl: "contactInfo.html", controller: function ($scope, $stateParams) { var contactInfo = $stateParams.contact; $scope.name = contactInfo.name; $scope.phone = contactInfo.phone; } })

I expect var contactInfo to be an object containing name and phone but I'm getting an undefined instead.

Sajeetharan · Accepted Answer · 2019-01-12T13:08:26.263

0

Your controller should be,

controller: function ($scope, $state) {
   var contactInfo = $state.params.contact;
}

EDIT

First of all you cannot pass an Object to another state like this, and there are few mistkaes in your configuration.

You need to define your router config with the parameter. Also consider using an id to pass to another state and retrieve the details using an API call or use localstorage.

Here is the fix, i have considered phone number as the state param here,

 .state('contactInfo', {
       url: "contactInfo/:phone",
       templateUrl: "contactInfo.html",
       controller: function ($scope, $state, $stateParams) {
       console.log('state2 params:', $stateParams);
       var contactInfo = $stateParams.phone;
       console.log(contactInfo);
       alert(JSON.stringify(contactInfo));
       $scope.name = contactInfo.name;
       $scope.phone = contactInfo.phone;
    }
})

and you need to pass the info as,

   $state.go("contactInfo", { phone : contact.phone });

PLUNKER DEMO

edited Jan 12 '19 at 13:08

answered Jan 12 '19 at 11:51

Sajeetharan

216,225
63
350
396

I tried that too, but the variable is still undefined. – Jadenkun Jan 12 '19 at 11:54
are you using ui router – Sajeetharan Jan 12 '19 at 11:56
can you create a plunker and reproduce the issue – Sajeetharan Jan 12 '19 at 11:59
I see. I'm going to retrieve my contacts from a local database so I'll be using an id as a single parameter and you really can't pass an object as a parameter? that's a bummer. Anyways, thanks for your help. I appreciate it. – Jadenkun Jan 12 '19 at 13:05
@Jadenkun No i meant you cannot pass object like the way you did. it is supported with ui-router using the params option https://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router i meant thats not the right way if the object is too big – Sajeetharan Jan 12 '19 at 13:09

score 0 · Answer 2 · answered Jan 12 '19 at 12:57

 $scope.goToContactInfo = function (contact) {                       
     $state.go("contactInfo", {contact}); <-- this
 };


.state('contactInfo', {
               url: "/contactInfo",
               templateUrl: "contactInfo.html",
               params:{ <-- this
                 contact: null
               },
               controller: function ($scope, $state) {
                   var contactInfo = $state.params.contact;
                   alert(contactInfo);
                   $scope.name = contactInfo.name;
                   $scope.phone = contactInfo.phone;
               }
           })

Passing an object using $state.go in AngularJS

2 Answers2