[英]ng-click change parent class
我正在尝试构建一个简单的滑出菜单,使用菜单按钮可以使其正常运行。
<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
工作原理?
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 }">
我认为这更加简洁明了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.