$stateParams is empty object

Question

i saw a lot of similar questions at SO, but those solutions not worked for me :(

About my site and app: backend is wordpress with json api, angular app is on the mysite.lc/catalog/ page.

my controller:

var catalogControllers = angular.module('catalogControllers', []); catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) { $log.debug(angular.toJson($stateParams, true)); $http.get(url).success(function(data) { console.log('data is loaded'); }); } ]);

my routing setup:

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']); catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '?producttype&colors&models', controller: 'catalogCtrl', onEnter: function() { console.log('route entered'); } }); $urlRouterProvider.otherwise("/"); }]);

So when i go to url like http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17 console shows {} from catalogCtrl, then data is loaded from catalogCtrl $http.get, and only after that route entered

If i do log it that way (at router config) controller: function($stateParams) { console.log($stateParams); } it doesn't output anything.

Immanuel Rosal · Accepted Answer · 2015-08-04 04:36:04Z

I would suggest resolving the $stateParams on its corresponding state on the .config section. Also,if it is your intention, you need to make your url name part of the url property and not just the stateParameters because ui-router doesn't automatically assign 'home' just because you declared it to be the home state. You can also make the parameters optional by declaring the 'params' property and setting everything to null.

var catalogApp = angular.module('catalogApp', ['ui.router','ngResource', 'ngSanitize', 'catalogControllers']); catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { params: { productType: null, colors: null, models: null } url: '/home?productType&colors&models', controller: 'catalogCtrl', resolve: { parameters: function($stateParams){ return $stateParams; } } }); $urlRouterProvider.otherwise("/"); }]);

and to view it in the console, I would suggest using $log to preserve the sequence of it (I had this problem before using console.log) and angular.toJson to display the data;

var catalogControllers = angular.module('catalogControllers', []); catalogControllers.controller('catalogCtrl', ['$scope', 'parameters', '$log' function ($scope, parameters, $log) { $log.debug(angular.toJson(parameters, true)); //the 'true' arguments makes the json 'prettyfied' } ]);

let me know how it goes because it's a bit unorthodox for me to create the app which doesn't start from the root page.

Thanks Immanuel, but this solution didn't change anything, also i've found where is my problem lying, see it in my answer above.

Alex K · Accepted Answer · 2015-08-04 20:21:41Z

I've found what was the problem, and it's small and easy (as usually :) ).

Actually everything worked fine, but i had some unmentioned $http.get calls in code above, and my logging was before any data has been loaded, so firstly i logged my $stateParams and only after that (after data has been loaded) my "home" state has been achieved. So solution is to put work with $stateParams into $http.get(..).success() function.

So now my controller looks like

var catalogControllers = angular.module('catalogControllers', []); catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) { $http.get(url).success(function(data) { console.log('data is loaded'); $log.debug(angular.toJson($stateParams, true)); }); } ]);

router:

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']); catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '?producttype&colors&models', controller: 'catalogCtrl', onEnter: function() { console.log('route entered'); } }); $urlRouterProvider.otherwise("/"); }]);

URL like http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17 now outputs in console this:

data is loaded from $http.get in controller

route entered from router

{ "producttype": "4", "colors": "5,7,9", "models": "17" } from $stateParams in controller

Please add your comment, because i'm really newbie in angular and will appreciate any opinions on that.

You never had an http call in your question. Can you provide that as well please?
Yes, by that i had some unmentioned $http.get calls in code above i meant that it's completely my fault for not providing any details about $http.get :( So it should be written like i didn't mention $http.get calls in code above, sorry for confusing. Also i'll update question and answer with more clearly info.

Collectives™ on Stack Overflow

$stateParams is empty object

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related