Angular.js: ng-show element when $state.current.name is a certain value

Question

I am looking to show a block of HTML only when $state.current.name equals about.list. So far I have the following code but it doesn\'t seem to be t

Answer 1

Or

JS

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

HTML

data-ng-show="$state.includes('about.list')"

Answer 2

You can use filters like isState or includedByState.

ng-if="'about.list' | isState" // exactly 'about.list'

ng-if="'about' | includedByState" // works for about and its children about.*

Answer 3

The view (html) doesn't know about the variable $state. It only knows the $scope that is associated with the view.

You can expose the $state variable on the $scope inside the controller that is associated with this view (you might have to inject $state into your controller as well):

$scope.uiRouterState = $state;

Then change the expression in your markup slightly:

<li class="list-item" ng-show="uiRouterState.current.name == 'about.list'">