Angular.js:当$state.current.name是某个值时，ng-show元素

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

本文关键字：元素 ng-show name js current state Angular      更新时间：2023-09-26

我希望只在$state.current.name等于about.list时显示HTML块。到目前为止，我有以下代码，但它似乎没有根据状态切换元素。

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' }
        }
      });
  }]
);

您可以使用像isState或includedByState这样的过滤器。

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

或

JS 

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

HTML 

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

视图(html)不知道变量$state。它只知道与视图相关联的$scope。

你可以将$state变量暴露在与此视图相关的控制器中的$scope上(你也可能必须将$state注入到你的控制器中):

$scope.uiRouterState = $state;

然后稍微改变标记中的表达式:

<li class="list-item" ng-show="uiRouterState.current.name == 'about.list'">
相关文章：