Question

当路线为“/”

时，我想隐藏导航栏

我成功隐藏/显示导航栏但问题是，当导航栏被隐藏时，“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为布局设置条件类

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隐藏了NavBar

2 个答案: