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

回答

相关问题