CODEWITHSUNDEEP
angularjsangular-ui-router
belyid
belyid

Reputation: 871

Why am I unable to access $stateParams on controller ng-init?

I'm using a controller in the body tag to instantiate some variables that are used through the application, namely the language that will be used in the application (based on the url param).

<!--index.html-->
<body ng-controller="AppCtrl" ng-init="init()">
    <section ui-view></section>
</body>

In the init() function I try to read the "lan" param from the url using $stateParams but it's still undefined:

/*AppCtrl*/
$scope.init = function () {
    console.log($stateParams); // prints Object {lan: "en"}
    console.log($stateParams.lan); // prints undefined
    $timeout(function () {console.log($stateParams.lan);}, 500); //prints "en"
}

It's odd because I can see it print $stateParams with the .lan property I can't access it.

Also I configured the $stateProvider like this:

$stateProvider
    .state('root', {
        url: '/{lan:(?:pt|en)}',
        abstract: true,
        template: '<div ui-view=""></div>',
        params: { lan: { value: 'pt' } },
    })
    .state('home', {
        parent: 'root',
        url: '/',
        templateUrl: '/front/main/views/front-main.client.view.html'
    });

What is the right way to do this?

Upvotes: 1

Views: 307

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123871

The way is to remove the ng-controller from here

<body ng-controller="AppCtrl" ng-init="init()">

and move it to state

.state('root', {
    url: '/{lan:(?:pt|en)}',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: { lan: { value: 'pt' } },
    controller:'AppCtrl'
})

In general.. states' views and their controllers are about UI-Router world... and not AngularJS ng-controller

Upvotes: 3

Related Questions