父列表項的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(); 
};