ng-click不起作用，深入ui-views中

Question

我正在使用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个不同的ui-views。这是该应用程序中我遇到ng-click未触发的唯一情况。由于牵涉到的复杂性，我无法在jsfiddle中重现。

1. 为什么我的ng-click没有触发？

更新1

如iH8下面建议的那样，可能是孤立作用域问题（这毫无道理，但无论如何都尝试了）。下面的代码不会触发也不会使{{testVal}}变为“after”。它始终保持为“before”。

<div class="user-sub-menu" ng-show="showSubMenu" ng-init="testVal='before'">
    <div ng-click="testVal='after'">Logout</div>
    {{testVal}}
</div>

- Joshua Ohana

Answer 1

问题已解决。我需要在子菜单的css中添加z-index:1。原来它是被另一个元素覆盖了…

z-index: 1;

- Joshua Ohana

---

我应该知道，当我想出一个复杂的答案时，通常是非常简单的事情。感谢您的跟进。 - iH8

Answer 2

如果 ng-click 指令无法在当前作用域中找到 logout 方法，那么它就不会触发。这意味着它嵌套在一个创建隔离作用域的指令中。通常，作用域在原型链中从其父级继承。隔离作用域则不会如此。因此，它无法访问祖先的任何属性或方法，因为它没有祖先。

- iH8

---

我认为可能是这样的（尽管没有任何意义），所以我只是设置了一个变量并显示它，并在ng-click中更改了它的值...也没有起作用--我编辑我的帖子以包括那个尝试。 - Joshua Ohana