how to collapse all function on for each angular UI tree

Issue

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?

Solution

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 .

Answered By - 32teeths