ng-click事件在angular js中绑定到子节点li

Question

嘿，我正在使用ng-click指令在li上绑定menuIconClick($event(函数。但对孩子李也有约束力。代码如下

%div.sideNavBar
  %ul.navBar
    %li.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // binding here only
      %ul.subMenu
        %li All sites // but gets call here also
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

模板在HAML中。我不明白为什么？

感谢的任何帮助

Answer 1

尝试将图标&图标单击事件作为单独的元素，而不是父元素。DOM事件在层次结构中冒泡，因此，如果父元素有ng-click处理程序，那么单击任何子元素也会触发该父单击处理程序，除非停止事件传播。

您可以停止事件传播，类似于：

AngularJS点击停止传播

或者更改DOM结构，使公文包图标不是子菜单的父菜单：

%div.sideNavBar
  %ul.navBar
    %li
      %a.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // no longer a parent
      %ul.subMenu
        %li All sites // click here won't bubble up to ng-click
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

Answer 2

试试他的。e.stopPropagation()我对此不确定。

%li.icons-briefcase-static{'ng-click'=>"menuIconClick($event);$event.stopPropagation();"} 

Answer 3

试试这个：

In html list,

ng click="menuIconClick($event(">

 In JS function,

$scope.menuIconClick=函数(ev(｛

ev.stopPropagation();

}