Preventing click event on disabled tree node in angular custom directive template

Question

I have a custom angular tree component, which looks like this in the broswer:

+ Parent 1
   + Child 1-A
      - Child 1-A-A
      - Child 1-A-B
      - Child 1-A-C
   + Child 1-B
   + Child 1-C

The directive template looks like this:

<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>

The ers-tree-item directive creates each "li" element in the list, so each Parent and Child noted in the tree above are essentially created from the template here 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">

     // within this element there is just the "+" or "-" icon
     // as well as the label for each tree item (i.e. Parent 1)
  </a>
</li>

How can I disable the click event on just the li element(s) that are set to disabled..So if a tree node is disabled (say Child 1-A) I want to remove the click event on that node so it can't be dragged? With basically each tree node the same, I can't figure out how to disabled the click event on just the one(s) that are disbaled...

I can currently disable drag on a disabled element but the problem I'm having is that if its a child node that is disabled, is attempted to be dragged, it drags the entire "ul" element. So I think just disabling click on the disabled tree node might be best..

ThibaudL · Accepted Answer · 2017-01-14 08:14:25Z

0

You could use some css :

input.myClass.disabled {
    pointer-events : none;
}

answered Jan 14, 2017 at 8:14

ThibaudL

1,0099 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bschmitty Over a year ago

this still bubbles up to the parent li item and drags the whole list

Collectives™ on Stack Overflow

Preventing click event on disabled tree node in angular custom directive template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related