angular-ui-tree单击不起作用

Question

我下载了angular-ui-tree包，并将其安装在the服务器上。我可以在浏览器中调出示例页面，但按钮上的所有单击操作(折叠/展开树、添加节点等)都不起作用。我在firebug中没有得到任何错误。如果我将浏览器指向树组件( https://jimliu.github.io/angular-ui-tree/index.html)的公共页面，它就可以工作。

我做了一些调试，发现问题是当为ui-tree-node元素调用ng-repeat时，ng-click操作不起作用。在下面的代码中，test()函数在我的控制器中，如果我删除ui-tree-node或ng-repeat标记，它就会执行。

<li ui-tree-node ng-repeat="node in mydata" > 
    <a  ng-click="test()" >{{node.title}} </a>
</li>

这是角度树组件中的一个bug吗？有什么方法可以在我的环境中修复这个问题吗？

Answer 1

修复方法是在顶层的ui-tree-nodes元素中添加data-nodrag标签。

(在li元素中添加data-nodrag也可以)。

Answer 2

您可以同时使用以下两种方法：

使用toggle(this)

• drag

点击

总之，只需确保要展开/折叠的元素不在ui-tree-handle内

<script type="text/ng-template" id="tree_renderer.html">
  <div ng-class="{collapsed: collapsed}">
    <div class="ctx_node" 
        ui-on-drop="onDrop($event, $data, ctx,node); active=false"> 
        <span class="expanded" 
            ng-click="toggle(this)"
            ng-class="{'collapsed': collapsed,'expanded': !collapsed}">
        </span>
        <span ui-tree-handle>{{node.title}}</span>
    </div>
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes">
    <li ng-repeat="node in node.nodes" 
        ui-tree-node ng-include="'tree_renderer.html'">
    </li>
  </ol>
</script>
<div ui-tree data-drag-enabled>
  <ol ui-tree-nodes="" ng-model="node.nodes" id="tree-root">
    <li ng-repeat="node in node.nodes" 
        ui-tree-node ng-include="'tree_renderer.html'"></li>
  </ol>
</div>