AngularJs 隐藏导航栏答案

【问题标题】：AngularJs hidden NavBarAngularJs 隐藏导航栏
【发布时间】：2016-05-13 18:03:57
【问题描述】：

我想在路由为“/”时隐藏navBar

我成功隐藏/显示导航栏，但问题是，当导航栏被隐藏时，“app-body” div 有 50px 的填充顶部（导航栏应该在哪里）

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

此图像显示导航栏可见时的布局

此图显示导航栏隐藏时的布局

正如您在第二张图片中看到的那样，顶部有一个灰色部分。我是不是做错了什么？

谢谢

【问题讨论】：

发布一个小提琴，这样人们也可以看到你的 CSS！可以使用 ng-controller 在 div 上放置一个类，使其高度为 50px，而不是 body 具有 50px 填充。然后是隐藏的，它的高度也是如此。
尝试将 ng-hide 更改为 ng-if。如果为真，ng-if 应该完全删除该元素。
您使用的是ui-router？只需将导航栏放入ui-view。
我将您的“固定”评论发布到答案中。您可以将其标记为已接受以表明问题已解决。请注意Stack Overflow 中将标题更改为“已解决”不是我们所做的；相反，我们要么发布选择解决我们问题的答案。

标签： html css angularjs twitter-bootstrap navbar

【解决方案1】：

除了上面这条评论

尝试将 ng-hide 更改为 ng-if。如果为真，ng-if 应该完全删除该元素。

使用 ngClass 为您的布局设置条件类

【讨论】：

【解决方案2】：

我用下面的 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>

【讨论】：