AngularJs 隐藏导航栏

Question

我想在路由为“/”时隐藏导航栏

我成功 hide/show 导航栏，但问题是，当导航栏被隐藏时，“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>

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

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

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

谢谢

Answer 1

除了上面这条评论

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

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

Answer 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>

AngularJs 隐藏导航栏

AngularJs hidden NavBar

html

css

navbar

twitter-bootstrap

angularjs