ng-click 不触发，深入 ui-views [英] ng-click not firing, deep inside ui-views

问题描述

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

这个位只是显示/隐藏子菜单

{{getUsername()}}<span class="glyphicon glyphicon-chevron-down"></span>

和子菜单的内容 - ng-click 失败！

<div ng-click="logout()">注销</div>

奇怪的是，如果我把它放在子菜单之外，它工作得很好.ng-click 成功

注销

和用户子菜单的 css，唯一不同的是

.user-sub-menu {位置:固定；边框半径:6px；边框:实心 1px #f3fcff;填充:1em；顶部:51px；右:4px；}

所有这些标记都包含在 <div ui-view="user" class="user-view"></div> 中，它本身大约是 5-6div 嵌套在各种 ui 视图中.这是我第一次也是唯一一次在他的应用程序中遇到 ng-click 不应该触发的情况.由于涉及的复杂性，我无法在 jsfiddle 中重现.

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

更新 1

正如下面 iH8 所建议的，认为这可能是一个孤立的范围问题(这没有任何意义，但无论如何都尝试过).下面的代码不会触发并且不会将 {{testVal}} 更改为after".它始终保持之前".

<div ng-click="testVal='after'">注销</div>{{testVal}}

解决方案

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

z-index: 1;

I am using AngularJS and ui-router. I have a submenu which opens when they click their username, inside of which I want a logout button. It's a div with an ng-click that should log out the user; however, the ng-click is never firing.

This bit just shows/hides the subMenu

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

And the content of the subMenu - ng-click fails!

<div class="user-sub-menu" ng-show="showSubMenu">
    <div ng-click="logout()">Logout</div>
</div>

Oddly, if I take it outside of the sub-menu it works just fine. ng-click succeeds

<div ng-click="logout()">Logout</div>

And the css for user-sub-menu, the only thing that's different

.user-sub-menu {
    position: fixed;
    border-radius: 6px;
    border: solid 1px #f3fcff;
    padding: 1em;
    top: 51px;
    right: 4px;
}

All of this markup is wrapped inside of <div ui-view="user" class="user-view"></div>, which itself is about 5-6 divs deep nested in various ui-views. This is the first and only time int his app I have encountered ng-click not firing when it should. Due to the complexity involved I have not been able to reproduce in jsfiddle.

1. Why is my ng-click not firing?

Update 1

As iH8 suggested below, thought it might be an isolated scope issue (which doesn't make any sense but tried it anyway). The below code does not fire and does not change the {{testVal}} to 'after'. It remains 'before' always.

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

解决方案

Fixed. I had to add a z-index of 1 to the css of the sub-menu. Turns out it was behind another item...

z-index: 1;

这篇关于ng-click 不触发，深入 ui-views的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！