Angular: Empty Fiddle

http://angularjs.org/

by alimills

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="appCtrl">
  <tree val="treeData()"></tree>
</div>

CSS

.indent {
   padding-left: 20px;    
}

JavaScript

angular.module('components', []);
        
        angular.module('App', ['components']);
       
        angular.module('components')
          .filter('ifarray', function () {
              return function (input) {
                  return $.isArray(input) ? input : [];
              }
          })
          .directive('treenode', function ($compile) {
              return {
                  restrict: 'E',
                  terminal: true,
                  scope: { val: '=' },
                  link: function (scope, element, attrs) {
                      if (angular.isArray(scope.val.items)) {
                         
                          element.append('<div>+ {{val.text}}<div ng-repeat="item in val.items"><treenode val="item"></tree></div></div>');
                      } else {
                          element.append('<span class="indent">- {{val.text}}</span>');
                      }
                      $compile(element.contents())(scope.$new());
                  }
              }
          })
          .directive('tree', function ($compile) {
              return {
                  restrict: 'E',
                  terminal: true,
                  scope: { val: '=' },
                  link: function (scope, element, attrs) {
                      if (angular.isArray(scope.val)) {
                         
                          element.append('<div><div ng-repeat="item in val"><treenode val="item"></tree></div></div>');
                      } 
                      $compile(element.contents())(scope.$new());
                  }
              }
          });
       
        

        function appCtrl($scope) {
            $scope.treeData = function() {
             return [
                 {
                     text: "Furniture", items: [
                         { text: "Tables & Chairs" },
                         { text: "Sofas" },
                         { text: "Occasional Furniture" }
                     ]
                ...