我正在使用 AngularJS 和 ui-router。我有一个子菜单,当他们单击他们的用户名时会打开,在其中我想要一个注销按钮。这是一个带有 ng-click 的 div,应该注销用户;但是,ng-click 永远不会触发。
这个位只是显示/隐藏子菜单
<div class="user-view-content" ng-init="showSubMenu = false" ng-click="showSubMenu = !showSubMenu">
{{getUsername()}}
<span class="glyphicon glyphicon-chevron-down"></span>
</div>
以及子菜单的内容 - ng-click 失败!
<div class="user-sub-menu" ng-show="showSubMenu">
<div ng-click="logout()">Logout</div>
</div>
奇怪的是,如果我把它放在子菜单之外,它就可以正常工作。 ng-click 成功
<div ng-click="logout()">Logout</div>
和用户子菜单的 css,唯一不同的是
.user-sub-menu {
position: fixed;
border-radius: 6px;
border: solid 1px #f3fcff;
padding: 1em;
top: 51px;
right: 4px;
}
所有这些标记都包含在 <div ui-view="user" class="user-view"></div>
中,它本身大约有 5-6 个 div 深嵌套在各种 ui View 中。这是我第一次也是唯一一次在他的应用程序中遇到 ng-click 没有在应该触发的时候触发。由于涉及的复杂性,我无法在 jsfiddle 中重现。
- 为什么我的 ng-click 没有触发?
更新 1
正如 iH8 在下面建议的那样,认为这可能是一个孤立的范围问题(这没有任何意义,但无论如何都试过了)。下面的代码不会触发,也不会将 {{testVal}} 更改为“after”。它始终保持“之前”。
<div class="user-sub-menu" ng-show="showSubMenu" ng-init="testVal='before'">
<div ng-click="testVal='after'">Logout</div>
{{testVal}}
</div>
最佳答案
已修复。我必须在子菜单的 css 中添加 1 的 z-index。原来它在另一个元素后面......
z-index: 1;
关于javascript - ng-click 不触发,深入 ui-views,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29052817/