javascript - ng-click事件在angular js中绑定(bind)到子li

Question

嘿，我正在使用 ng-click 指令在 li 上绑定(bind) menuIconClick($event) 函数。但也绑定(bind)到子 li。代码如下

%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 ng-click stopPropagation

或者更改您的 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