Angular.js: элемент ng-show, когда $state.current.name является определенным значением

Я хочу показать блок HTML только тогда, когда $state.current.name равно about.list. Пока у меня есть следующий код, но он не переключает элемент в зависимости от состояния.

index.html

<nav class="global-navigation">
    <ul class="list">
    <li class="list-item">
      <a class="list-item-link" ui-sref="home">
        Home
      </a>
    </li>
    <li class="list-item">
      <a class="list-item-link" ui-sref="about">
        About
      </a>
    </li>
     <li class="list-item" ng-show="$state.current.name == 'about.list'">
      <a class="list-item-link" ui-sref="about.list">
        List
      </a>
    </li>
    </ul>
  </nav>

app.js

var myApp = angular.module('myApp', ['ui.router'])

  .config(['$urlRouterProvider', '$stateProvider', 

    function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/404.html');

    $stateProvider.

      // Home
      state('home', {
        url: '/',
        templateUrl: 'partials/_home.html',
        controller: 'homeCtrl'
      }).

      // About
      state('about', {
        url: '/about',
        templateUrl: 'partials/_about.html',
        controller: 'aboutCtrl'
      }).

      // About List
      state('about.list', {
        url: '/list',
        controller: 'aboutCtrl',
        templateUrl: 'partials/_about.list.html',
        views: {
          'list': { templateUrl: 'partials/_about.list.html' }
        }
      });

  }]

);

Ответы

Ответ 1

или

JS

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

HTML

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

Ответ 2

Вы можете использовать фильтры, такие как isState или includedByState.

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

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

Ответ 3

Вид (html) не знает о переменной $state. Он знает только $scope, который связан с представлением.

Вы можете открыть переменную $state в $scope внутри контроллера, связанного с этим представлением (вам, возможно, также потребуется ввести $state в ваш контроллер):

$scope.uiRouterState = $state;

Затем слегка измените выражение в вашей разметке:

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