叠加 div 未显示 ng-if 是否为真

Question

我有一个页面，有一个响应式菜单，如果菜单处于活动状态，就会触发灰色叠加层。我一直试图使用ng-if来显示此叠加层，但没有成功。我错过了什么？

.HTML

<header ng-controller="NavController">
<div class="cover-header">
<!-- Burger menu icon placement -->
<div class="navbar-header">
<button type="button" class="collapsed nav-burger-icon" data-toggle="collapse" data-target="#main-menu"
aria-expanded="{{showOverlay}}">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
</header>

<div class="container-burger-menu">
<div class="collapse container-accordion" id="main-menu">
<!-- menu items go here -->
</div>
</div>
<div class="overlay-nav" ng-if="showOverlay">

.CSS

.overlay-nav {
//display:block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
z-index: 999;
}

控制器

function NavController($scope) {
$scope.$watch('showOverlay', function(){
console.log("value is ", $scope.showOverlay);
$scope.showOverlay = !$scope.showOverlay;
});
}

在使用$scope.$watch之前，我已经尝试过这样的事情：

function NavController($scope) {
$scope.toggleOverlay = function() {
$scope.showOverlay = !$scope.showOverlay;
}
}

然后在 HTML 中：

<button type="button" class="collapsed nav-burger-icon" data-toggle="collapse" data-target="#main-menu"
aria-expanded="{{showOverlay}}" ng-click="toggleOverlay()>    

如有任何答复，将不胜感激。谢谢。

---

编辑：我的最新尝试：

.HTML

<button type="button" class="collapsed nav-burger-icon" data-toggle="collapse" data-target="#main-menu"
ng-click="toggleOverlay()">
<!-- overlay -->
<div class="overlay-nav" ng-if="nav.showOverlay">

控制器

function NavController($scope) {
$scope.nav = { showOverlay: '' };
$scope.toggleOverlay = function() {
$scope.nav.showOverlay = !$scope.nav.showOverlay;
}
}

$scope.nav.showOverlay可以很好地更改值，但不会被ng-if拾取。

Answer 1

您的覆盖层不在控制器的范围内，因此无法访问showOverlay。

若要修复此问题，请改为将ng-controller-指令移动到容器元素中。喜欢这个：

<div ng-controller="NavController">
<header>
<div class="cover-header">
<!-- Burger menu icon placement -->
<div class="navbar-header">
<button type="button" class="collapsed nav-burger-icon" data-toggle="collapse" data-target="#main-menu"
aria-expanded="{{showOverlay}}">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
</header>

<div class="container-burger-menu">
<div class="collapse container-accordion" id="main-menu">
<!-- menu items go here -->
</div>
</div>
<div class="overlay-nav" ng-if="showOverlay">
</div>