refactor: Expand and collapse all nodes of a tree using events

Author: Niels Dequeker

examples/js/basic-example.js

@@ -26,11 +26,11 @@
       };
 
       $scope.collapseAll = function () {
-        $scope.$broadcast('collapseAll');
+        $scope.$broadcast('angular-ui-tree:collapse-all');
       };
 
       $scope.expandAll = function () {
-        $scope.$broadcast('expandAll');
+        $scope.$broadcast('angular-ui-tree:expand-all');
       };
 
       $scope.data = [{

examples/views/basic-example.html

@@ -22,6 +22,9 @@
 <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>
 

source/controllers/treeCtrl.js

@@ -42,27 +42,6 @@
         };
 
         $scope.resetEmptyElement = this.resetEmptyElement;
-
-        var collapseOrExpand = function (scope, collapsed) {
-          var i, subScope,
-              nodes = scope.childNodes();
-          for (i = 0; i < nodes.length; i++) {
-            collapsed ? nodes[i].collapse() : nodes[i].expand();
-            subScope = nodes[i].$childNodesScope;
-            if (subScope) {
-              collapseOrExpand(subScope, collapsed);
-            }
-          }
-        };
-
-        $scope.collapseAll = function () {
-          collapseOrExpand($scope.$nodesScope, true);
-        };
-
-        $scope.expandAll = function () {
-          collapseOrExpand($scope.$nodesScope, false);
-        };
-
       }
     ]);
 })();

source/directives/uiTreeNode.js

@@ -58,6 +58,14 @@
               attrs.$set('collapsed', val);
             });
 
+            scope.$on('angular-ui-tree:collapse-all', function () {
+              scope.collapsed = true;
+            });
+
+            scope.$on('angular-ui-tree:expand-all', function () {
+              scope.collapsed = false;
+            });
+
             /**
              * Called when the user has grabbed a node and started dragging it
              * @param e

source/directives/uiTreeNode.spec.js

@@ -0,0 +1,48 @@
+(function () {
+  'use strict';
+
+  describe('the uiTreeNode directive', function () {
+    var $rootScope, $compile, $scope, element;
+
+    beforeEach(module('ui.tree'));
+    beforeEach(inject(function ($injector) {
+      $rootScope = $injector.get('$rootScope');
+      $compile = $injector.get('$compile');
+      $scope = $rootScope.$new();
+
+      $scope.items = [{
+        'id': 42,
+        'title': 'Node 42'
+      }];
+    }));
+
+    beforeEach(function () {
+      element = createElement();
+    });
+
+    function createElement() {
+      var template = '<div ui-tree><ol ui-tree-nodes ng-model="items"><li ng-repeat="item in items" ui-tree-node><div ui-tree-handle>{{item.title}}</div></li></ol></div>';
+      element = angular.element(template);
+      $compile(element)($scope);
+      $scope.$digest();
+      return element;
+    }
+
+    it('should collapse on receiving the angular-ui-tree:collapse-all event', function () {
+      $rootScope.$broadcast('angular-ui-tree:collapse-all');
+      $scope.$digest();
+
+      expect(element.find('[ui-tree-node]').attr('collapsed')).toEqual('true');
+      expect(element.find('[ui-tree-node]').scope().collapsed).toEqual(true);
+    });
+
+    it('should expand on receiving the angular-ui-tree:expand-all event', function () {
+      $rootScope.$broadcast('angular-ui-tree:expand-all');
+      $scope.$digest();
+
+      expect(element.find('[ui-tree-node]').attr('collapsed')).toEqual('false');
+      expect(element.find('[ui-tree-node]').scope().collapsed).toEqual(false);
+    });
+  });
+
+}());