Is there a way to pass the parent into ng-include along with the item?
I believe passing the parent to the child could lead to code complexity and make maintenance difficult. It may also impact performance, especially with large amounts of data. Instead of using nested directives with isolate scope, a different approach can be taken to remove a node from a nested tree based on a unique value:
function removeFromTree(parent, childNameToRemove){
console.log(parent);
parent.nodes = parent.nodes.filter(function(child){
return child.name !== childNameToRemove;
}).map(function(child){
return removeFromTree(child, childNameToRemove);
});
return parent;
}
$scope.removeItem = function(item){
$scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
}
Check out the demo plunker here
Full Code
HTML
<div ng-controller="DialogDemoCtrl">
<div class="span5 article-tree">
<div ng-style="{'overflow': 'auto'}">
<script type="text/ng-template" id="tree_item_renderer">
<span>
{{showNode(data)}}
</span>
<button ng-click="removeItem(data)">Remove me!</button>
<li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li>
</ul>
</script>
<div class="tree well">
<ul>
<li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'"></li>
</ul>
</div>
</div>
</div>
</div>
JS
angular.module('plunker', ['ui.bootstrap'])
.controller('DialogDemoCtrl', function ($scope, $http) {
buildEmptyTree();
function removeFromTree(parent, childNameToRemove){
console.log(parent);
parent.nodes = parent.nodes.filter(function(child){
return child.name !== childNameToRemove;
}).map(function(child){
return removeFromTree(child, childNameToRemove);
});
return parent;
}
$scope.removeItem = function(item){
$scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
}
function buildEmptyTree() {
$scope.displayTree =
[{
"name": "Root",
"type_name": "Node",
"show": true,
"nodes": [{
"name": "Loose",
"group_name": "Node-1",
"show": true,
"nodes": [{
"name": "Node-1-1",
"device_name": "Node-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-1-2",
"device_name": "Node-1-2",
"show": true,
"nodes": []
}, {
"name": "Node-1-3",
"device_name": "Node-1-3",
"show": true,
"nodes": []
}]
}, {
"name": "God",
"group_name": "Node-2",
"show": true,
"nodes": [{
"name": "Vadar",
"device_name": "Node-2-1",
"show": true,
"nodes": []
}]
}, {
"name": "Borg",
"group_name": "Node-3",
"show": true,
"nodes": []
}, {
"name": "Fess",
"group_name": "Node-4",
"show": true,
"nodes": []
}]
}];
[{
"name": "Android",
"type_name": "Android",
"icon": "icon-android icon-3",
"show": true,
"nodes": []
}];
}
});