Currently facing the following issue:
I need to utilize a directive in multiple areas of an application, without having to specify the parent object and directive object each time I use it.
Take a look at this plnkr: http://plnkr.co/edit/yUoXXZVJmoesIQNhoDDR?p=preview
It consists of a $scope.data object that holds a nested array structure.
$scope.data=
[
{"name": "LEVEL0_A", "subitems":
[
{"name":"Level1_A", "subitems":[{"name":"A"},{"name":"B"}]},
{"name":"Level1_B", "subitems":[{"name":"C"},{"name":"D"}]},
...
...
and so on
Additionally, there is a simple custom directive named deleteItem, designed for this purpose.
.directive('deleteItem', function() {
return {
scope:{
item:'=',
parent:'='
},
template: '<ng-transclude></ng-transclude><a href="" ng-click="deleteItem(item, parent)">Delete</a>',
transclude:true,
controller: function($scope){
$scope.deleteItem=function(currentItem,currentParent){
currentParent.subitems.splice(currentParent.subitems.indexOf(currentItem),1);
};
}
};
});
Shown below is the html template:
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="level0 in data">
<h2>{{level0.name}}</h2>
<div ng-repeat="level1 in level0.subitems">
<div delete-item parent="level0" item="level1">
{{level1.name}}
</div>
--------------------
<div ng-repeat="level2 in level1.subitems">
<div delete-item parent="level1" item="level2">
Name: {{level2.name}}
</div>
</div>
<hr>
</div>
</div>
</div>
</body>
The setup works as intended, but I believe there might be a more efficient way to reference the item and parent objects without manual linking to the scope.
If anyone has insights or suggestions on how to improve this process, I would greatly appreciate it. Thank you. Markus