父列表项的onclick是接管子列表项的onclick（AngularJS）

Question

我有以下的部分模板

<ul> 
    <li ng-repeat="a in alist" ng-click="toggleShowItems(a)"> 
     {{a.name}} 
     <ul ng-if="a.showItems" > 
      <li ng-repeat="item in a.items" ng-click="showItemDetail(item.id)"> {{item.id}} 
      </li> 
     </ul> 
    </li> 
    </ul> 

我遇到的问题是，当我点击嵌套列表的一个项目，它崩溃。但我真正需要的是为嵌套列表项目提供不同的onclick操作。请让我知道我错了什么。提前感谢您的回复。

Answer 1

在你内心的点击只需加上$event.stopPropagation()

ng-click="showItemDetail(item.id);$event.stopPropagation()" 

Answer 2

发生了什么事是点击冒泡了dom树。这可以通过将$事件对象作为参数传递给点击调用stopPropagation单击处理程序停止：

查看：

ng-click="showItemDetail(item.id, $event)" 

控制器：

$scope.showItemDetail = function(id, $event){ 
    // do your stuff 
    $event.stopPropagation(); 
};