Question

我正在使用AngularJS和ui-router。我有一个子菜单，当他们点击他们的用户名时会打开，我想要一个注销按钮。它是一个带有ng-click的div，应该注销用户;但是，ng-click永远不会被触发。

此位只显示/隐藏subMenu

<div class="user-view-content" ng-init="showSubMenu = false" ng-click="showSubMenu = !showSubMenu">
    {{getUsername()}}
    <span class="glyphicon glyphicon-chevron-down"></span>
</div>

subMenu的内容 - 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视图中。这是他的应用程序中第一次也是唯一一次我遇到过ng-click不应该触发的时候。由于涉及的复杂性，我无法在jsfiddle中重现。

为什么我的ng-click没有开火？

更新1

正如iH8在下面所建议的那样，认为这可能是一个孤立的范围问题（它没有任何意义，但无论如何都要尝试）。以下代码不会触发，也不会将{{testVal}}更改为＆＃39;之后的＆＃39;。它仍然存在于＆＃39;之前。总是

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

Answer 1

固定。我不得不在子菜单的css中添加1的z-index。事实证明它落后于另一个项目...

z-index: 1;

Answer 2

如果由于ng-click指令无法在当前范围内找到logout方法，则不会触发它。这意味着它嵌套在一个创建隔离范围的指令中。通常，范围原型继承自其父级。孤立的范围没有。因此它无法访问祖先的任何属性或方法，因为它没有。

点击不点火，深入ui-views

2 个答案: