Angular UI-Router passing data between states with go function does not work

angular-ui, angularjs, javascript

Solution

What you have to do is to define the `name` param in the `private.visits` state like:

$stateProvider
    .state('public', {
        abstract: true,
        templateUrl: 'App/scripts/main/views/PublicContentParent.html'
    })
    .state('public.login', {
        url: '/login',
        templateUrl: 'App/scripts/login/views/login.html',
        controller: 'loginCtrl'
    })

$stateProvider
    .state('private', {
        abstract: true,
        templateUrl: 'App/scripts/main/views/PrivateContentParent.html'
    })
    .state('private.visits', {

        // NOTE!
        // Previously, we were only passing params as an array 
        // now we are sending it as an object. If you 
        // send this as an array it will throw an error 
        // stating id.match is not a function, so we updated 
        // this code. For further explanation please visit this
        // url http://stackoverflow.com/a/26204095/1132354
        params: {'name': null}, 

        url: '/visits',
        views: {
            'main': {
                controller: 'visitsListCtrl',
                templateUrl: 'App/scripts/visits/views/VisitsList.html',
                resolve: {
                        name: ['$stateParams', function($stateParams) {
                            return $stateParams.name;
                        }]
                    }
            }
        }
    });

And then in the controller access to the name:

visitsModule.controller('visitsListCtrl', ['name',
function (name) {
    console.log(name);
}]);

Hope it help you!

Problem

I just started learning angularjs and I am using angular-ui-router. I am trying to send data from one state to another using `$state.go` but I have no success. Here is what I have so far: I have not included the html intentionally because I assumed it was not needed if it is needed please tell me and I will add it. I have configured my states as below: ``` $stateProvider .state('public', { abstract: true, templateUrl: 'App/scripts/main/views/PublicContentParent.html' }) .state('public.login', { url: '/login', templateUrl: 'App/scripts/login/views/login.html', controller: 'loginCtrl' }) $stateProvider .state('private', { abstract: true, templateUrl: 'App/scripts/main/views/PrivateContentParent.html' }) .state('private.visits', { url: '/visits', views: { 'main': { controller: 'visitsListCtrl', templateUrl: 'App/scripts/visits/views/VisitsList.html' } } }); ``` When my `LoginController` is invoked it will execute the below code: ``` loginModule.controller('loginCtrl', ['$state', function ($scope, $state) { $state.go('private.visits', { name : "Object"}); }]); ``` When the `private.visits` page is active, I am trying to print the `$stateParams`: ``` visitsModule.controller('visitsListCtrl', ['$stateParams', function ($stateParams) { console.log($stateParams); }]); ``` As things state $stateParams is an empty object. I expected it to to contain the object I passed in loginCtrl. EDIT It seems that if `private.visits` url has this url format `'/visits/:name'` and I also add the property params: ["name"] I get access to the object I send from the `public.login` state. The side effect is that the parameters are added to the url which is logical. I tried doing the same thing with a child state with no url, and in this case it seems that I do not have access to the params I passed from `public.login`. How do I send data in child states?

Original source

Related problems