ng-click 更改父级 class

Question

我正在尝试构建一个简单的滑出式菜单，我使用菜单按钮可以正常工作。

<div class="menu-button" ng-click="show_menu = !show_menu"></div>

<div class="side-menu" ng-class="{true: 'show_menu'}[show_menu]">
        <div class="filters-generic filter-{{filter.filter_type}}" ng-repeat="filter in filters" ng-click="show_menu = !show_menu;filterby(filter.filter_type)">{{filter.filter_type}}</div>
</div>

CSS

.side-menu {
  left: -25%;
  position: absolute;
  transition: all 0.2s linear 0s;
  width: 25%;
  background: #000;
}

.side-menu.show_menu {
    left:0%;
}

当我按下 menu-button div 它工作正常（即它添加了类），但是我也希望能够在选择其中的项目时关闭菜单，我已尝试上述方法，但没有任何反应。

我原以为是因为它调用了另一个函数，但我什至删除了它，仍然存在同样的问题。我是否误解了 ng-click 的工作原理？

Answer 1

ng-repeat 指令创建新范围 - 子范围到您的 show_menu 所在的范围。因此，通过单击菜单项（我认为是某种过滤器），您实际上是在该子范围内更改 show_menu 。但是 ng-class 在父作用域中监视 show_menu，这没有改变。

有关更多信息，请阅读此处：https://github.com/angular/angular.js/wiki/Understanding-Scopes

PS：可以这样写ng-class：

<div class="side-menu" ng-class="{ 'show_menu': show_menu }">

我觉得这样更简洁明了。

ng-click 更改父级 class

ng-click change parent class

javascript

css

angularjs