user7890278
user7890278

Reputation:

Getting undefined for $stateParams

I am trying to pass data from one controller to another using $stateParams but getting null instead of valid data:

Please find my route code below:

.state("root.home", {
            url: "/home",
            abstract: true,
            template: homeHtml,
            controller: "HomeCtrl as ctrl",
        })
.state("root.home.content", {
            url: "",
            params: {
                userId: null,
            },
            views: homeView,
        })

Controller A code:

$state.go("root.home.content", {userId}); // getting correct UserId

HomeCtrl code:

// In its constructure I injected the $stateParams

    init() {
            console.log($stateParams); // getting undefined here
            if ($stateParams && $stateParams.userId) {
                this.loadUser($stateParams.userId);
            }
        }

Upvotes: 0

Views: 645

Answers (2)

user7890278
user7890278

Reputation:

I fixed this by adding params to parent root instead of child. The correct code is:

.state("root.home", {
                url: "/home",
                params: {
                    userId: null,
                },
                abstract: true,
                template: homeHtml,
                controller: "HomeCtrl as ctrl",
            })
.state("root.home.content", {
                url: "",
                views: homeView,
            })

Upvotes: 1

DilumN
DilumN

Reputation: 2897

Pass your parameter as below

$state.go("root.home.content", {'userId': userId}); 
//This userId should be a valid variable inside your Controller A

And also you should edit your router as below,

.state("root.home.content", {
            url: "/:userId",
            params: {
                userId: null,
            },
            views: homeView,
        })

Otherwise it will not show in the url & cannot access from $stateParams

Upvotes: 1

Related Questions