angularjs 使用 ng-include 的 Treeview 为所有节点的 parents 触发 ng-click

Question

我想用angularjs写treeview。我正在使用 ng-include 进行 recursive 调用..除了 ng-click 之外一切都很好..当单击每个节点时..层次结构调用是从 child 到它的 parents 并且对于此层次结构中的每个节点， ng-click 都会触发。我怎样才能解决这个问题？？..我有这个确切的问题使用另一种方法（在 post-link 上附加元素，我认为这不是一个好方法）而不是 ng-include.
这里我的代码是：

index.html:

    <!doctype html>
<html>    
    <head>       
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>    
    </head>
    <body >   
        <div ng-app="app" ng-controller='AppCtrl'>    
    <ul>
        <li ng-repeat="category in categories" ng-click='nodeSelected(category)' ng-include="'template.html'"></li>
    </ul>    
</div>    
    <script src="controller.js"></script>

    </body>
</html>

template.html:

{{ category.title }}
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories" ng-click='nodeSelected(category)' ng-include="'template.html'">{{ category.title }}</li>
    </ul>

controller.js

    var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {

$scope.nodeSelected = function(category){
    alert('This node is selected' + category.title);
}
$scope.categories = [
  { 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks', 
              categories:[
              {
              title:'Paridokht'
          },
            {
                title:'Shahnaz',
                categories:[
                    {
                        title:'Sohrab'
                    }
                ]
            }
              ]
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },

  {
    title: 'Printers'
  }
];
});

这是输出图片：

for example when paridokht node is selected, the alert hierarchy in order is paridokht,macbooks、笔记本电脑、计算机（从child到parents）。
请帮我解决这个问题。这太痛苦了！ :(

Answer 1

尝试停止 DOM 树中 bubble-ing 上方的事件。

在你里面ng-click:

ng-click='nodeSelected($event, category)'

在你的控制器中：

$scope.nodeSelected = function($event, category){
    $event.stopPropagation();
    alert('This node is selected' + category.title);
}

angularjs 使用 ng-include 的 Treeview 为所有节点的 parents 触发 ng-click

angularjs Treeview using ng-include fires ng-click for all node's parents

javascript

treeview

recursion

event-propagation

angularjs