如何折叠每个角度 UI 树的所有功能

Posted 2023-03-24

【中文标题】如何折叠每个角度 UI 树的所有功能

【英文标题】：how to collapse all function on for each angular UI tree

【发布时间】：2017-09-09 02:39:47

【问题描述】：

对于 Angular ui-tree，我想添加全部展开或全部折叠。

我尝试了以下代码，它可以工作。

 $scope.collapseAll = function () 
        $scope.$broadcast('angular-ui-tree:collapse-all');
      ;

  $scope.expandAll = function () 
    $scope.$broadcast('angular-ui-tree:expand-all');
  ;
  ...

问题是，我的页面有多个 ui 树，我只想单独触发 expandAll 函数。现在我触发了这个 expandAll 函数。 所有 ui -tree 都会受到影响。

有没有办法把每一个都设置成单独的？

How to call collapseAll function on Angular UI tree?

【参考方案1】：

如果您检查 Angular ui 树的 Source，'angular-ui-tree:collapse-all' 事件会切换范围值。其他问题是 angular-ui-tree 中的每个指令都继承了父级的范围，而不是具有孤立的范围。因此，在广播事件时更改它实际上是在更改相同的范围值。

您应该找到一种方法让每棵树都有一个单独的范围，或者考虑使用其他一些树，例如 v-accordion 。

【讨论】：

感谢您的回复。 v-accordion 是一个很棒的插件，以后会考虑使用它。无论如何，我使用while循环并递归获取childNode，可以解决它。谢谢

【参考方案2】：

我们应该为指定的树范围广播 angular-ui-tree:collapse-all。 它对我有用。您可以毫不犹豫地使用它。

    function collapseAll() 
        var treeScope = _getRootNodesScope('myTreeId');
        if (treeScope) 
            treeScope.$broadcast('angular-ui-tree:collapse-all');
        
    


 function expandAll() 
        var treeScope = _getRootNodesScope('userTreeroot');
        if (treeScope) 
            treeScope.$broadcast('angular-ui-tree:expand-all');
        
    

  function _getRootNodesScope(myTreeId) 
 var treeElement = angular.element(document.getElementById(myTreeId));
 if (treeElement) 
 var treeScope = (typeof treeElement.scope === 'function') ? 
 treeElement.scope() : undefined;
            return treeScope;
        
        return undefined;
    ;