How to call collapseAll function on Angular UI tre

Question

I am using the angular-ui-tree directive to show a tree in my AngularJS application. However, I would now like to collapse the tree. The documenation states that there is a function called collapseAll on the scope, but doesn't show an example of how to call this.

Searching Google has brought up this issue where someone asks for exactly the same thing - unfortunately the linked answer results in a 404.

What I don't get is: If this function is accessible via the scope of the ui-tree directive, but this directive uses its own isolated scope, accessing the function effectively means accessing the directive's scope. How do I get to that scope?

I know how to require a controller from above (using the ^ syntax in a directive), but how do I access a scope below?

Answer 1

in basic-example.html
wrap by div ng-controller="BasicExampleCtrl"

  <div class="row">
      <div class="col-sm-12">
          <h3>Basic Example</h3>
          <button ng-click="expandAll()">Expand all</button>
          <button ng-click="collapseAll()">Collapse all</button>
      </div>
  </div>
  <div class="row">
      <div class="col-sm-6">
          <div ui-tree id="tree-root">
              <ol ui-tree-nodes ng-model="data">
                  <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
              </ol>
          </div>
      </div>
  </div>

in basic-example.js

angular.module('demoApp')
    .controller('BasicExampleCtrl', ['$scope', function ($scope) {
      ...
      $scope.collapseAll = function () {
        $scope.$broadcast('angular-ui-tree:collapse-all');
      };

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

Answer 2

This official demo shows how to use collapseAll.

Notice that there is an extra tree.js,

var getRootNodesScope = function() {
  return angular.element(document.getElementById("tree-root")).scope();
};

$scope.collapseAll = function() {
  var scope = getRootNodesScope();
  scope.collapseAll();
};

Answer 3

I had issues with the demo for some reasons and wasn't able to use collapseAll(). Instead, I simply added "ui-tree-handle" class to each ui-tree-handle directive div and performed the expand/collapse to each distinctive scope. For a parent controller, add button containing ng-click="ctrl.collapseAll()":

    var vm = this;
    vm.collapseAll = function(){
        var elems = document.getElementsByClassName("ui-tree-handle");
        for(var i=0; i < elems.length; i++){
            angular.element(elems[i]).scope().collapse();
        }
    }
    vm.expandAll = function(){
        var elems = document.getElementsByClassName("ui-tree-handle");
        for(var i=0; i < elems.length; i++){
            angular.element(elems[i]).scope().expand();
        }
    }

Answer 4

I understand this thread is quite old now but I feel the question hasn't been fully answered yet. As I was searching for same solution without success - until I manually tried each available 'child' related function the ui-tree scope provided. The ability to access the ui-tree root node's first level of child scopes can be done like this:

First ensure you have declared the 'id' of the root node. eg the Id set in the example below

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="data" id="tree-root">
    <li ng-repeat="node in data" ui-tree-node ng-nclude="'nodes_renderer.html'"></li>
  </ol>
</div>

Then access the ui-tree root scope like this

var uiTreeScope = angular.element(document.getElementById("tree-root")).scope();
var childNodes = uiTreeScope.childNodes();

The returned variable 'childNodes' is an array of all child node scopes. This gives access to all the nodes that are children of the root node. Note you can do this multiple times to go down multiple layers or node levels of the tree.

Side-note: I'm not sure if you were attempting this but this scope is also useful to collapse just a certain level of layers or node level of the ui-tree nodes - for example:

_.each(childNodes, function (c) { c.collapse() });

If you are unfamiliar with the "_." in this case it is simply a 'foreach' loop - Using the library http://underscorejs.org/

Answer 5

You can use library in ./demo/dist/ Don't use library in ./dist

I have been had same problem with you.

You can see demo tree.html and see angular-ui-tree.js in ./demo/dist/

http://jimliu.github.io/angular-ui-tree/tree.html