ng-show 正在隐藏页面上的所有内容

Question

这是我的场景：

我正在使用AngularJS创建一个侧边栏菜单。当用户选择汉堡图标时，它应将菜单向右滑动。当用户选择删除按钮时，菜单应向左滑动（离开屏幕）。

当前方案：

菜单按预期打开和关闭。但是，当菜单打开时，页面上的其余内容将消失。我花时间在网上查找，但无法隔离问题。有什么提示或建议吗？

这是我的存储库：

https://bitbucket.org/ChaseHardin/teaplanner/

法典：

控制器

"use strict";
teaApp.controller("menuController", function($scope) {
    $scope.toggled = false;
    $scope.toggle = function() {
        $scope.toggled = !$scope.toggled;
    }
});

视图

 <div ng-controller="menuController">
        <h3 class="glyphicon glyphicon-menu-hamburger" id="menu-align-hamburger" ng-click="toggle()" ng-show="!toggled"></h3>
        <div class="menu-box" ng-show="toggled">
            <h3 class="glyphicon glyphicon-remove" id="menu-align-remove" ng-click="toggle()"></h3>
        </div>
        <div>
            <h1 class="text-center">Hello StackOverflow!!</h1>
        </div>
    </div>

.CSS

.menu-box {
    background-color: #403b41;
    width: 20%;
    height: 100vh;
}
#menu-align-hamburger {
    padding-left: 15px;
    cursor: pointer
}
#menu-align-remove {
    padding-left: 15px;
    cursor: pointer;
    color: dimgrey;
}

Answer 1

当您的菜单展开时，它最终会占据整个内容区域，将您的"您好"文本推到侧边栏下方。

创建更灵活的布局，例如将display:inline-block应用于菜单和内容区域将导致内容在菜单打开时简单地"移动"，而不是被推到菜单下方。

附言，如果你向下滚动足够远，你会看到你的内容仍然存在。 它只是隐藏在视图中，具体取决于您的分辨率。