Expand And Collapse View Functionality In Angularjs

Category 1 (Level 1) - Subcategory 1 (Level 2) ----Sub-Subcategory 2 (Level 3) -----Sub-subcategory 3 (Level 3) Category 2 (Level 1) - Subcategory 2 (Level 2) - Subcategory 3 (Leve

Solution 1:

The tricky part when building a tree like structure is directive recursion. Google for "recursive directive" to find some info about the problems. The solution is to add and compile the recursive parts in link. I've built a simple example here http://plnkr.co/edit/JgQu3r?p=preview

function myMenu() {
    return {
      scope : {
        myMenu : '=myMenu'
      },
      template: '<li ng-repeat="item in myMenu"><my-menu-item></my-menu-item></li>'
    }
}

myMenuItem.$inject = ['$compile'];
function myMenuItem($compile) {
    return {
      template: '<a href ng-bind="item.name" ng-click="show($event)"></a>',
      link: function(scope, element) {
        if (angular.isArray(scope.item.menu)) {
              element.append($compile(
                '<ul ng-if="collapsed" my-menu="item.menu"></ul>')(scope));

        }
        scope.show = function($event) {
          scope.collapsed = !scope.collapsed;
        }
      }
    }
}