angularjs - ng-click 和 ng-class 切换类

Question

我正在尝试通过单击按钮将 open 类切换到 nav 元素。下面的代码没有将 open 类分配给 nav，也没有在未单击按钮时删除 open。

<nav class="slide-menu" ng-class="{'open': open, '': !open}">

<button class="slide-btn" ng-click="open=!open"></button>

我知道 '' 这显然是错误的，因为它只是将文字分配为类。

Answer 1

尝试将 ng-init 添加到容器 div:

<div ng-init="open=false">
    <nav class="slide-menu" ng-class="{'open': open}">
    <button class="slide-btn" ng-click="open=!open"></button>
</div>

或者在你的作用域中添加 $scope.open = false;。

在你上面的代码中发生的是两个元素中的每一个都有它自己的范围，它包含一个 open 属性，所以你可以将它们包装在另一个元素中(有它自己的范围)并将 open 属性放在那里。所以在 nav 和 button 的内部范围内，当它试图寻找一个名为 open 的属性时，它会在它自己的范围内查找并且不要找不到它，所以它在它的父范围(包装 div)中查找并在那里找到它。

您可以从此处了解有关 Angular 范围继承的更多信息: https://github.com/angular/angular.js/wiki/Understanding-Scopes

-- 此外，您不需要 '': !open 部分。