NG-点击不点火，底蕴深厚的UI意见 [英] ng-click not firing, deep inside ui-views

问题描述

我使用AngularJS和UI路由器。我有当他们点击他们的用户名，这里面我想有一个注销按钮，打开子菜单。这是与应注销用户的NG-点击一个div;然而，NG-点击从不开火。

此位只是显示/隐藏子菜单

 ＆LT; D​​IV CLASS =用户视图内容NG-的init =showSubMenu =假NG点击=showSubMenu = showSubMenu！＆GT;
    {{getUsername（）}}
    ＆LT;跨度类=glyphicon glyphicon-字形向下＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

和子菜单的内容！ - NG-点击失败

 ＆LT; D​​IV CLASS =用户的子菜单中的NG-秀=showSubMenu＆GT;
    ＆LT; D​​IV NG点击=退出（）＆GT;注销＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

奇怪的是，如果我把它的子菜单之外它工作得很好。 NG-点击成功

 ＆LT; D​​IV NG点击=退出（）＆GT;注销＆LT; / DIV＆GT;
 

和对用户的子菜单，这是不同的唯一事情的CSS

 。用户-子菜单{
    位置：固定;
    边界半径：6像素;
    边框：1px的固体＃f3fcff;
    填充：1EM;
    顶部：51px;
    右：4PX;
}
 

所有这些标记被包裹＆LT内; DIV UI视图=用户级=用户视图＆GT;＆LT; / DIV＆GT; ，其中本身是约5-6 div的嵌套深的各种UI的意见。这是他的INT应用程序我也遇到NG-点击而不是当它应该烧的第一和唯一的一次。由于涉及的复杂性我一直没能在的jsfiddle重现。

1. 为什么我的NG-单击不费一枪？

更新1

由于IH8以下建议，认为它可能是一个孤立的问题范围（这没有任何意义，而是尝试也无妨）。下面code不火，并没有改变{{}名为testVal}以后。这是前始终保持。

 ＆LT; D​​IV CLASS =用户的子菜单中的NG-秀=showSubMenuNG-的init ==名为testVal'前'＆GT;
    ＆LT; D​​IV NG点击==名为testVal后＆GT;注销＆LT; / DIV＆GT;
    {{}名为testVal}
＆LT; / DIV＆GT;
 

解决方案

固定。我不得不1的z-index添加到子菜单的CSS。原来这背后的另一个项目...

 的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-点击不点火，底蕴深厚的UI意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！