Angular UI router - acess stateParams from other state

Question

I am beginner for Angular and I am sorry for my bad english. I find similar questions and answers but it doesn't help to my code... I want something like this

.state('members.detail', { parent: "members", url: "/:id", templateUrl: "templates/members.detail.html", controller: 'membersDetailsController' }) .state('members.detail.fees', { parent: 'members.detail', url: '/fees', views: { 'items': { templateUrl: 'templates/tabs/tab2-fees.html', controller: 'Fees' } } })

And I also have something like this:

myapp.controller('membersDetailsController', function($scope, $http, $stateParams) {alert($stateParams.id);}

And:

<a ui-sref=".fees" ng-class="{ active: $state.includes('members.detail.fees') }">Fees</a>

I need id from first state to use in second state/fees-controller

P.S. there is similar question about this but doesn't help me (or didn't understand quite good) Angular ui-router - how to access parameters in nested, named view, passed from the parent template?

Kristiyan Kostadinov · Accepted Answer · 2014-06-12 08:07:27Z

4

You can't access $state and $stateParams directly in the template, you need to bind it to the scope:

myapp.controller('Fees', function($scope, $http, $stateParams, $state) { $scope.params = $stateParams; $scope.currentState = $state; };

<a ui-sref=".fees" ng-class="{ active: params.id === someId }">Fees</a>

Note that ui-router also supports the ui-sref-active directive that you can use to highlight elements depending on the active state.

Also note that nested routes inherit state parameters from their parents.

edited Jun 12, 2014 at 8:07

answered Jun 12, 2014 at 6:27

Kristiyan Kostadinov

3,7124 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PakiM Over a year ago

my next problem is that part 'someId'. I have users, and every user has own id. So every time when I click on user, id is changing...so I have dependency of url: "/:id"

PakiM Over a year ago

next thing, I have an error ReferenceError: $state is not defined

Kristiyan Kostadinov Over a year ago

@PakiM I forgot to inject the state, as for to id: where does this id come from? It isn't really stated.

PakiM Over a year ago

I use mysql base, set up api, so I can read user's id in html like {{user.id}}...it give me real value what I need. First time when I use that id is in .state('members.detail') , his controller uses $stateParams.id... now that same id I need in another state Fees in his controller. Hope you can catch me.. I also do this .run so I can use for ng-class={active: $state.includes()}; myapp.run(function($rootScope, $state, $stateParams) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; });

PakiM Over a year ago

I solve a problem, I didn't put '$stateParams' before function, in controler: myapp.controller('Fees', ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) { console.log($stateParams.id); }]); thanx for help!!

user911483 · Accepted Answer · 2014-06-12 06:23:24Z

Well, you can access it exactly as you wrote from all of the child controllers. Something like this:

myapp.controller('Fees', function($scope, $http, $stateParams) {alert($stateParams.id);}

But you have a mistake in your "ui-sref" attribute. It should look like this:

<a ui-sref="members.detail.fees({ id:1 })" ng-class="{ active: $state.includes('members.detail.fees') }">Fees</a>

Hope this would help.

Collectives™ on Stack Overflow

Angular UI router - acess stateParams from other state

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related