Angular ui-router which nested state is the current state

Question

I've got multiple nested views going on the same display screen, though for responsive css purposes I want to add a class on which current state view is active. (I know they are all active, but I'm looking for a way to distinguish which view is associated with the $state.$current). I'd like to make this dynamic and not require a static name. I'm already using ui-sref-active to display a bread-crumb of which links were clicked to get to the current state, but now I'm also looking for a way to check whether the view associated with a state is the correct one associated with the most current state.

//parent
<article class="column1" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>

//child 1
<article class="column2" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>

//child 2
<article class="column3" ng-class="{current: WHERE_I'M_LOOKING_FOR_HELP}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>
//ETC... UNKNOWN NUMBER OF NESTED STATES

I know I could do something like: <article ng-class="{ current: $state.$current.path.length == 2 }"> but I'd like to not need to write a static number in the view.

Update I'm looking to be able to check to see if the current state exactly matches the state of each ui-view.

Jeffrey · Accepted Answer · 2015-05-27 20:01:39Z

Got it working... feel free to post your solution if different. Thanks!

//global state
app.run(function($rootScope, $state) {
  $rootScope.$state = $state;
});

//state provider
.state('contacts.detail', {
    url: "/contacts/detail",
    templateUrl: 'contacts.detail.html',
    controller: function ($scope, $state) {
        $scope.viewstate = $state.current.name;
    }
})
// etc. states and controllers

//view template
<article class="column1" ng-class="{current: $state.current.name == viewstate}">
  <a ng-repeat="item in items" ui-sref="{{item.url}}" ui-sref-active="selected">
    {{ item.title }}
  </a>
</article>
<ui-view/>
//etc... view templates

ragamufin · Accepted Answer · 2015-05-27 02:25:25Z

0

If I'm understanding your question correctly then I believe you can use the isState filter for this. See more info here:

ui.router.state/isState

If you store a reference to $state somewhere in your $scope or $rootScope then effectively you could do something like the following:

<article class="column1" ng-class="{current: ($state.current.name | isState)}">

answered May 27, 2015 at 2:25

ragamufin

4,16232 silver badges32 bronze badges

5 Comments

Jeffrey Over a year ago

The isState filter is only verifying if it is a state... I'm looking to be able check whether the $state.current.name == exact state name of each ui-view. Hope this clarifies.

ragamufin Over a year ago

Did you try it? I know the documentation reads as if it's simply checking if it is a state but actually it seems to check if it is the current state. Try it.

Jeffrey Over a year ago

Yes this also works. What was throwing me off was that I wasn't storing each state's name in a variable to check. $state.current.name is always the current state, so I needed to add a variable to each state's controller to store it's state name. Thanks! BTW - If you know of a way around not needing to store each state's name as a scope variable in each controller... please let me know.

ragamufin Over a year ago

Somewhere in the docs it is recommended to store it in the $rootScope. I can't find the page now but the wording goes like this: "It's very handy to add references to $state and $stateParams to the $rootScope so that you can access them from any scope within your applications.". So what I do is exactly that, at application startup in the main js file or MainController I set $rootScope.$state and $rootScope.$stateParams pointing to them and each controller can then access it from $scope.$state and $scope.$stateParams

ragamufin Over a year ago

Found it! The comment is from the angular ui route sample app here: github.com/angular-ui/ui-router/blob/master/sample/app/…

Collectives™ on Stack Overflow

Angular ui-router which nested state is the current state

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related