ng-click更改父類

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 。 因此，通過單擊菜單項（我認為是某些過濾器），您實際上是在該子范圍中更改了show_menu 。 但是ng-class show_menu父范圍中的show_menu ，但未更改。

有關更多信息，請閱讀此處： https : //github.com/angular/angular.js/wiki/Understanding-Scopes

PS ：您可以編寫ng-class ：

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

我認為這更加簡潔明了。