angularjs树形采用NG-包括火灾对所有节点的父母NG-点击 [英] angularjs Treeview using ng-include fires ng-click for all node's parents
问题描述
我想写树状
使用 angularjs
。我使用 NG-包括
为递归
call..everything是从除 NG-罚款点击
..当每个节点clicked..the层次呼叫从小孩到它的父母,并在这个层次中的 NG-点击
的每一个节点火灾。我该如何解决这个问题?..我有使用另一种方法(在追加元素链接后
我认为这是不是一个好办法)而不是此确切的问题 NG-包括
这里是我的code:
I want to write treeview
using angularjs
. I am using ng-include
for recursive
call..everything is fine except from ng-click
..when each node is clicked..the hierarchy call is from child to it's parents and for every node in this hierarchy the ng-click
fires. how can i solve this problem??..I have this exact problem using another approach (appending element on post-link
which I think is not a good way) instead of ng-include
.
here is my code:
index.html的:
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:
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
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'
}
];
});
这里是输出画面:
here is the output picture:
例如当 paridokht 节点被选择,为了警戒层次是paridokht,macbooks,laptops,computers (从孩子父母)。
请帮我解决这个问题。这太痛苦了! (
for example when paridokht node is selected, the alert hierarchy in order is paridokht,macbooks,laptops,computers (from child to parents).
please help me to solve this issue. it's killing me! :(
推荐答案
尝试从泡沫ING在DOM树了停止的事件。
Try stopping event from bubble-ing up in the DOM tree.
在您 NG-点击
:
ng-click='nodeSelected($event, category)'
在你的控制器:
$scope.nodeSelected = function($event, category){
$event.stopPropagation();
alert('This node is selected' + category.title);
}
这篇关于angularjs树形采用NG-包括火灾对所有节点的父母NG-点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!