如何为每个 angular UI 树折叠所有功能

Question

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

我尝试了以下代码，它有效。

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

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

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

是否有任何解决方案可以将每个设置为单独的？

How to call collapseAll function on Angular UI tree?

Answer 1

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

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

Answer 2

我们应该为指定的树范围广播 angular-ui-tree:collapse-all。它的工作 me.you 可以毫不犹豫地使用它。

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

如何为每个 angular UI 树折叠所有功能

how to collapse all function on for each angular UI tree

expand

collapse

angularjs