belyid belyid - 1 month ago 17
AngularJS Question

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?

Answer

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