CODEWITHSUNDEEP
angularjsangular-ui-router
Jeffrey
Jeffrey

Reputation: 4146

Angular ui-router which nested state is the current state

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.

Upvotes: 0

Views: 655

Answers (2)

Jeffrey
Jeffrey

Reputation: 4146

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

Upvotes: 2

ragamufin
ragamufin

Reputation: 4162

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)}">

Upvotes: 0

Related Questions