0

For Angular ui-tree, i want to add expland all or collapse all.

I tried the following code and it works.

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

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

The question is,my page have multiple ui tree, i only want to trigger expandAll function for separate. now i trigger this expandAll function. ALL ui -tree will be affected.

Is there any solution to set each one as seperate?

How to call collapseAll function on Angular UI tree?

aynber
  • 22,380
  • 8
  • 50
  • 63
Jack.li
  • 55
  • 2
  • 10

2 Answers2

1

If you check at the Source of angular ui tree , the 'angular-ui-tree:collapse-all' event toggles a scope value . Other problem being each of the directives in angular-ui-tree inherits the scope of the parent than having a isolated scope . So changing the when you broadcast an event it is actually changing the same scope value .

You should either find a way for each tree's to have a separate scope or think of using some other tree's like v-accordion .

32teeths
  • 1,469
  • 1
  • 15
  • 32
  • 1
    Thanks your reply. v-accordion is a fantastic plugin, later will consider to use it. anyway, i use while loop and get childNode recursively, can solve it. Thanks – Jack.li Apr 13 '17 at 08:12
0

we should broadcast angular-ui-tree:collapse-all for specified tree scope. It's work for me.you can use it without any hesitation at 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;
    };
shahadul
  • 1
  • 2