ng-click 不触发，深入 ui-views

Posted 2023-03-06

【中文标题】ng-click 不触发，深入 ui-views

【英文标题】：ng-click not firing, deep inside ui-views

【发布时间】：2015-05-17 03:36:15

【问题描述】：

我正在使用 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 视图中。这是我第一次也是唯一一次在他的应用程序中遇到 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>

【参考方案1】：

已修复。我必须在子菜单的 css 中添加 1 的 z-index。原来它在另一个项目后面......

z-index: 1;

【讨论】：

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

【参考方案2】：

如果这没有触发，那是因为ng-click 指令在当前范围内找不到logout 方法。这意味着它嵌套在创建隔离范围的指令中。通常，作用域原型继承自其父级。孤立的范围没有。所以它不能访问祖先的任何属性或方法，因为它没有。

【讨论】：

我认为可能是这种情况（尽管它没有任何意义）所以我只是设置了一个变量并显示它，并在 ng-click 中更改了它的值...确实也不起作用 - 编辑我的帖子以包含该尝试