In the browser, my custom Angular tree component is displayed like this:
+ Parent 1
+ Child 1-A
- Child 1-A-A
- Child 1-A-B
- Child 1-A-C
+ Child 1-B
+ Child 1-C
This is what the directive template looks like:
<ul>
<ers-tree-item ng-if="ctrl.parentItem"
ng-repeat="item in ctrl.parentItem.children"
item="item"
parent="ctrl"
level="ctrl.level"
collapse-icon="ctrl.collapseIcon"
expand-icon="ctrl.expandIcon"
item-renderer="ctrl.itemRenderer"
item-loader="ctrl.itemLoader"
lazy-options="ctrl.lazyOptions"
ng-disabled="ctrl.disabled"
>
</ers-tree-item>
</ul>
Each "li" element in the list, representing each Parent and Child in the tree, is created by the ers-tree-item directive using the template below:
<!-- ers-tree-item directive -->
<li draggable="{{treeController.treeDraggable && !item.data.disabled && !disabled}}">
<a href="javascript:void(0);"
tabindex="0"
draggable="false"
ng-class="{'selected': item.selected}"
ng-click="onItemClick()"
ng-disabled="item.data.disabled || disabled">
// The "+" or "-" icon and label for each tree item (i.e. Parent 1) are within this element
</a>
</li>
I am looking to disable the click event only on the li element that is disabled. For example, if a tree node like Child 1-A is disabled, I want to prevent it from being dragged. Since all tree nodes have the same structure, I am struggling to figure out how to selectively disable the click event on disabled nodes.
Currently, I can prevent dragging on disabled elements, but the issue is when a disabled child node is dragged, the entire "ul" element gets dragged. Hence, I believe disabling the click event on disabled tree nodes might be the solution.