1

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?

Community
  • 1
  • 1
PakiM
  • 11
  • 1
  • 2

2 Answers2

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.

Jon Snow
  • 3,682
  • 4
  • 30
  • 51
  • 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 Jun 12 '14 at 07:56
  • next thing, I have an error ReferenceError: $state is not defined – PakiM Jun 12 '14 at 08:06
  • @PakiM I forgot to inject the state, as for to id: where does this id come from? It isn't really stated. – Jon Snow Jun 12 '14 at 08:08
  • 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 Jun 12 '14 at 08:42
  • 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!! – PakiM Jun 12 '14 at 10:18
0

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.