CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Facu Ferrari
Facu Ferrari

Reputation: 143

ng-hide based on parent state

I've got a navbar in my main controller and I want a link to show/hide based on the url. I'm using ui-router for routing so I've thought I could use $state for getting the parent state of the current state but I don't know how. I've done this before to get the current state and it works

<li ng-hide="$state.current.name === 'new-sector'">
    <a ui-sref="new-sector">+ Add new sector!</a>
</li>

But now, I'm working with nested states so the current state is new-sector.location. My problem is that I want that link to hide in all new-sector child states!

Thanks in advance for help!

Upvotes: 1

Views: 935

Answers (2)

Andrew Peters
Andrew Peters

Reputation: 366

Adding on to Chris T's answer:

To avoid having to both create a controller and inject $scope and $state for each state, you can simply use .run() and store your state information in the rootscope.

app.run( function($state, $rootScope){
    $rootscope.stateHolder = $state.current;
  }
);

Furthermore, if you're only interested in the name of the state, just add .name at the end of $state.current.

This can then be easily accessed by:

<div ng-hide="stateHolder.name == 'home'">
  This will be hidden on the home page.
</div>

Upvotes: 0

CozyAzure
CozyAzure

Reputation: 8468

You can always use $state.includes(stateName) to check if the current active state is equal to or is the child of the state stateName.

Here is an example plnkr that shows the usage of $state.includes.

More details on the wiki

Upvotes: 2

Related Questions