在角度自定義指令模板中防止禁用樹節點上的單擊事件

Question

我有一個自定義角樹組件，在broswer中看起來像這樣：

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

指令模板如下所示：

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

ers-tree-item指令在列表中創建每個“li”元素，因此上面樹中標注的每個父和子元素基本上都是從下面的模板創建的：

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

如何禁用僅設置為禁用的li元素的click事件。如果禁用了樹節點（比如Child 1-A）我想刪除該節點上的click事件，以便它可以'被拖？ 由於基本上每個樹節點都相同，我無法弄清楚如何禁用僅僅被解散的那個上的點擊事件...

我現在可以禁用對已禁用元素的拖動，但我遇到的問題是，如果嘗試拖動其禁用的子節點，則會拖動整個“ul”元素。 所以我認為只是禁用點擊禁用的樹節點可能是最好的..

Answer 1

你可以用一些css：

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