Angularjs 当我们在特定路线上时，如何隐藏div？

这是我的HTML文件：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout__title">App</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only mdl-typography--body-1-force-preferred-font">
            <a class="mdl-navigation__link" ui-sref="map" ui-sref-active="active">Carte</a>
            <a class="mdl-navigation__link" ui-sref="search" ui-sref-active="active">Recherche</a>
            <a class="mdl-navigation__link" ui-sref="admin" ui-sref-active="active">Admin</a>
          </nav>
        </div>
      </header>
      <!-- Navigation pannel, we show it only on smaller screen -->
      <div class="mdl-layout__drawer mdl-layout--small-screen-only">
        <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
          <a class="mdl-navigation__link" ui-sref="map" ui-sref-active="active">Carte</a>
          <a class="mdl-navigation__link" ui-sref="search" ui-sref-active="active">Recherche</a>
          <a class="mdl-navigation__link" ui-sref="admin" ui-sref-active="active">Admin</a>
        </nav>
      </div>
<main class="mdl-layout__content">
        <div ng-controller="GlobalController as globalCtrl">
        <div class="mdl-grid" >
        </div>
</main>

(function() {

angular.module('app.routing', ['ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider
    .when('', '/map')
    .when('/', '/map');
  $stateProvider
    .state('map', {
      url: '/map',
      templateUrl: 'views/map.html',
      controller: 'MapController as mapCtrl'
    })
    .state('search', {
      url: '/search',
      templateUrl: 'views/search.html',
      controller: 'SearchController as searchCtrl'
    })
    .state('admin', {
      url: '/admin',
      templateUrl: 'views/admin.html',
      controller: 'ValueController as valueCtrl'
    });
});

})();

---

如果我在管理栏上，而不是地图和搜索栏上，我只想在主体部分隐藏div mdl网格。怎么做？

在HTML中，您缺少一件事：ui视图

换线

<div class="mdl-grid" ></div>

为了

并且只有特定视图将显示在此div内

---

可以找到更多文档

您可以使用ng类并添加从控制器隐藏或显示视图的类

HTML

控制器

$scope.mdlGridClass = "mdl-grid hide"; // FOR HIDING DIV IN admin route

$scope.mdlGridClass = "mdl-grid show"; // FOR SHOWING DIV IN OTHERS

---

您可以使用

$state.current.name

获取当前状态的名称。以及根据当前状态显示或不显示的

ngIf

。查找a如果它是您要查找的

我可以在参数中添加两个视图，用于ui视图？在HTML代码中我已经有了一个其他的ui视图。是的，我想。看，我认为@SimonGirard试图做的是不改变这里的视图（我认为这样做很好）。他只是想简单地隐藏一个div。如果要根据您的状态隐藏div，可以使用$state对象$state.current.name获得与当前状态相同的值。在控制器中可以有这样一个变量。让isStateAdmin=（$state.current.name==admin）并在视图中使用ng来显示您的div，无论是否基于this@lealceldeiro：就是这样。我试着把所有的网格放在前面的视图中，除了一些细节，它都能工作……我把它放在一个控制器中，但是，当我在HTML页面中引用“$state.current”时，我有：{“name”：“，”url:“^”，“views”：null，“abstract”：true}@SimonGirard，可能是因为您处于根状态

'/'

。如果没有，我需要更多的代码来帮助you@SimonGirard当您在HTML页面中说“引用“$state.current”时，如果您是指在您的服务中引用

ApplicationState

。值为

{“name”：“，“url”：“^”，“views”：null，“abstract”：true}

是正常的，因为初始化此服务时，您处于默认状态，即

{“name”：“url”：“^”，“views”：null，“abstract”：true}

。行

appliState.statenow=JSON.stringify（$state.current）

仅被调用一次，即使状态更改，

statenow

的值也不会更改。因此，您需要在要显示当前状态值的HTML页面的控制器中，引用

$state

，并将其存储在范围变量中，以便在视图中访问它（就像这样，

$scope.myState

在您的视图中直接引用这个变量（如果您想显示当前状态值，就像这样：

{{myState.current}}

）。也许我不是很清楚，但看看我是如何做到的。

<div ng-class="mdlGridClass">
</div>

.hide{ display: none;}

.show{ display: block;}

$scope.mdlGridClass = "mdl-grid hide"; // FOR HIDING DIV IN admin route

$scope.mdlGridClass = "mdl-grid show"; // FOR SHOWING DIV IN OTHERS