AngularJs隱藏的NavBar

我想隱藏導航欄時，路徑爲「/」AngularJs隱藏的NavBar

我成功地隱藏/顯示導航欄，但問題是，當導航欄被隱藏，在「應用體」的div已經50像素填充頂部（這裏應該是導航欄）的

這是我的html代碼

<body ng-app="myApp" ng-controller="MainController" ui-prevent-touchmove-defaults> 

    <div class="app"> 
     <!-- Navbars --> 
     <div ng-hide="isActive('/')" ng-controller="NavBarController"> 

      <div class="navbar navbar-app navbar-absolute-top"> 
       <div class="navbar-brand navbar-brand-center" ui-yield-to="title"> 
        Mobile Angular UI 
       </div> 
       <div class="btn-group pull-left"> 
        <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"> 
         <i class="fa fa-bars"></i> Menu 
        </div> 
       </div> 
       <div class="btn-group pull-right" ui-yield-to="navbarAction"> 
        <div ui-toggle="uiSidebarRight" class="btn"> 
         <i class="fa fa-comment"></i> Chat 
        </div> 
       </div> 
      </div> 
     </div> 

     <!-- App Body --> 

     <div class="app-body"> 
      <ng-view class="app-content"></ng-view> 
     </div> 
    </div> 
</body>

此圖像顯示佈局時，導航欄是可見

此圖像顯示佈局時，導航欄被隱藏

正如你可以在第二圖像中看到有在頂部灰色部分。我做錯了什麼？

謝謝

來源

2015-12-21 Fabry

發佈小提琴，以便人們可以看到你的CSS呢！使用ng-controller可以在div上放置一個類，使其具有50px的高度，而不是具有50px填充的正文。那麼這是隱藏的，它的高度也是如此。 –

嘗試將ng-hide更改爲ng-if。 ng-if應該完全刪除元素，如果爲true。 –

你正在使用ui路由器？只需將導航欄放在'ui-view'裏面。 –

我解決我的問題與下面的HTML代碼

<div class="app"> 
     <!-- Navbars --> 
     <div ng-if="!isActive('/')" ng-include="'navBar.html'" ></div> 

     <!-- App Body --> 
     <div class="app-body"> 
      <ng-view class="app-content"></ng-view> 
     </div> 
    </div> 
</body>

來源

2016-05-13 10:03:44 fedorqui

除了上面

此評論嘗試改變NG隱藏到NG-IF。 ng-if應該完全刪除元素，如果爲true。

使用ngClass設置條件類佈局

來源

2015-12-22 03:47:36

AngularJs隱藏的NavBar

回答

相關問題