Question

这是我的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>

我的routing.js文件，为了在代码中拥有权限视图（我不在HTML文件上发布此部分）：

(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-grid，如果我在管理栏上而不是地图和搜索。怎么做？

Answer 1

在您的HTML中，您缺少一件事：ui-view

更改行

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

代表

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

此div中只显示特定视图

可以找到更多文档here

Answer 2

您可以使用ng-class并添加一个隐藏或显示控制器视图的类。

HTML

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

CSS

.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

Answer 3

您可以使用$state.current.name获取当前状态的名称。并根据当前状态显示或不显示ngIf。如果您正在寻找

，请查看this plunker

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

3 个答案: