如何隱藏div，當我們在一個特定的路線？

這裏是我的HTML文件：如何隱藏div，當我們在一個特定的路線？

<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。怎麼做？

來源

2017-04-26 Simon Girard

在你的HTML你缺少一件事情：用戶界面視圖

更改線路

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

爲

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

而且只有特定的視圖將此DIV

顯示

可以找到更多的文檔here

來源

2017-04-26 15:49:58 Tonio

我可以在參數中添加兩個視圖，爲ui視圖？我已經在HTML代碼中使用了其他ui-view。 –

是的，我想。看看[這]（https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views） – JeanJacques

我認爲@SimonGirard試圖做的是不改變這裏的意見（我想這是作品精細）。他只是想隱藏一個div。 – lealceldeiro

您可以使用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

來源

2017-04-26 15:58:32

您可以使用$state.current.name來獲得當前狀態的名稱。並根據當前狀態顯示或不顯示ngIf。看看this plunker如果它是你正在尋找

來源

2017-04-26 16:13:36 JeanJacques

我把它，在一個控制器，但是，當我在HTML頁面中引用「$ state.current」，我有： {「name」：「」，「url」：「^」，「views」：null，「abstract」：true} –

@SimonGirard可能因爲你處於根狀態''/''。如果沒有，我需要更多的代碼來幫助你 – JeanJacques

這裏是一個plunker：http://plnkr.co/edit/ueyxwyctUFyZ24IZl3Fx –

如何隱藏div，當我們在一個特定的路線？

回答

相關問題