Angular.js：当$ state.current.name是一定值NG-表演元素 [英] Angular.js: ng-show element when $state.current.name is a certain value

问题描述

我期待显示HTML块只有当 $ state.current.name 等于 about.list 。到目前为止，我有以下的code，但它似乎并没有被切换取决于国家的元素。

的index.html

 ＆LT;导航类=全球导航＆GT;
    ＆LT; UL类=清单＆GT;
    ＆LT;李班=列表项＆GT;
      ＆LT;一类=列表项链接UI-SREF =家＆GT;
        家
      ＆所述; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李班=列表项＆GT;
      ＆LT;一类=列表项链接UI-SREF =约＆GT;
        关于
      ＆所述; / A＆GT;
    ＆LT; /李＆GT;
     ＆LT;李班=列表项NG秀=$ state.current.name =='about.list'＆GT;
      ＆LT;一类=列表项链接UI-SREF =about.list＆GT;
        名单
      ＆所述; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
  ＆LT; / NAV＆GT;
 

app.js

  VAR对myApp = angular.module（'对myApp'，['ui.router']）  的.config（['$ urlRouterProvider'，'$ stateProvider'，    功能（$ urlRouterProvider，$ stateProvider）{    $ urlRouterProvider.otherwise（'/ 404.html'）;    $ stateProvider。      //首页
      状态（'家'，{
        网址：'/'，
        templateUrl：'谐音/ _home.html'，
        控制器：'homeCtrl
      }）。      // 关于
      状态（'约'，{
        网址：'/约，
        templateUrl：'谐音/ _about.html'，
        控制器：'aboutCtrl
      }）。      //关于名单
      状态（'about.list'，{
        网址：'/名单，
        控制器：'aboutCtrl'，
        templateUrl：'谐音/ _about.list.html'，
        观点：{
          名单：{templateUrl：'谐音/ _about.list.html'}
        }
      }）;  }]）;
 

解决方案

或

JS

  .RUN（函数（$状态，$ rootScope）{
    $ rootScope $状态= $状态。
}）
 

HTML

 数据-NG-秀=$ state.includes（'about.list'）
 

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 toggling the element depending on the state.

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

  }]

);

解决方案

Or

JS

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

HTML

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

这篇关于Angular.js：当$ state.current.name是一定值NG-表演元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！