AngularJS Tree Menu Example for Github　

by aljordan82

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
      <span><b>Selected Node</b> : {{currentNode.roleName}}</span>
    </div>

    <!--
      [TREE attribute]
      angular-treeview: the treeview directive
      tree-model : the tree model on $scope.
      node-id : each node's id
      node-label : each node's label
      node-children: each node's children
    -->
    <div
      data-angular-treeview="true"
      data-tree-model="roleList"
      data-node-id="roleId"
      data-node-label="roleName"
      data-node-children="children" >
    </div>

  </div>
</div>

CSS

div[data-angular-treeview] {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default */
  font-family: Tahoma;
  font-size:13px;
  color: #555;
  text-decoration: none;
}

div[data-tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

div[data-tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 20px;
}

div[data-tree-model] li .expanded {
  padding: 1px 10px;
}
 div[data-tree-model] li .expanded:before {
content: "\2b";
}

 

div[data-tree-model] li .collapsed {
  padding: 1px 10px;
  background-repeat: no-repeat;
}
div[data-tree-model] li .collapsed:before {
content: "\2b";
}

div[data-tree-model] li .normal {
  padding: 1px 10px;
  background-repeat: no-repeat;
}
div[data-tree-model] li .normal:before {
 /*content: "\2212";*/
}


div[data-tree-model] li i, div[data-tree-model] li span {
  cursor: pointer;
}

div[data-tree-model] li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}

JavaScript

(function(){
  
  //angular module
  var myApp = angular.module('myApp', ['angularTreeview']);

  //test controller
  myApp.controller('myController', function($scope){


  	//test tree model 2
    $scope.roleList2 = [
        { "roleName" : "Alerting", "roleId" : "role1","collapsed" : true, "children" : [
          { "roleName" : "test", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "roleName" : "test2", "roleId" : "role12", "collapsed" : true, "children" : []}
        ]},

        { "roleName" : "Calls", "roleId" : "role2","collapsed" : true, "children" : [
          { "roleName" : "Follow Me", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "roleName" : "Call Coverage", "roleId" : "role12", "children" : []}
        ]},

        { "roleName" : "Chats", "roleId" : "role3","collapsed" : true, "children" : []}
      ];

      
      
    //roleList1 to treeview
    $scope.roleList = $scope.roleList2;
  
  });
  
})();


/*
    angular.treeview.js
*/
(function(l){l.module("angularTreeview",[]).directive("treeModel",function($compile){return{restrict:"A",link:function(a,g,c){var e=c.treeModel,h=c.nodeLabel||"label",d=c.nodeChildren||"children",k='<ul><li data-ng-repeat="node in '+e+'"><i class="collapsed" data-ng-show="node.'+d+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'+
d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'+h+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'+d+'" data-node-id='+(c.nodeId||"id")+" data-node-label="+h+"...