Angular: Empty Fiddle

http://angularjs.org/

by blesh

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <ul ng-if="data.nodes.length > 0 || endHit()">
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<div data-menu-hierarchy></div>

CSS

ul {
    list-style: circle;
}
li {
    margin-left: 20px;
}

JavaScript

angular.module("myApp", [])
.directive('menuHierarchy', function () {
  return {
    restrict: 'A',
    templateUrl: 'tree_item_renderer.html',
    controller: "TreeController",
    link: function (scope, element, attrs) {
        scope.endHit = function (){
            
        };
        
        var $menu = element.find("ul");

        //Prints empty element        
        console.log($menu.html());
        
        //No real $menu to initialize 
        //$menu.menuAim({ });
      
    }
  };
})
.controller("TreeController", ['$scope', function($scope) {
        
    $scope.data = {
        name: "Root",
        nodes: [
            {
                name: "1",
                nodes: [
                   { 
                       name: "11", 
                       nodes: [
                           { name: "111", nodes: []},
                           { name: "112", nodes: []},
                           { name: "113", nodes: []}
                       ]
                   },
                   { 
                       name: "12", 
                       nodes: [
                           { name: "121", nodes: []},
                           { name: "122", nodes: []},
                           { name: "123", nodes: []}
                       ]
                   },
                   { 
                       name: "13", 
                       nodes: [
                           { name: "131", nodes: []},
                           { name: "132", nodes: []},
                           { name: "133", nodes: []}
                       ]
                   }
                ]
            },
            {
                name: "2",
                nodes: [
                   { 
                       name: "21", 
                       nodes: [
                           { name: "211", nodes: []},
                           { name: "212", nodes: []},
                           { name: "213", nodes: []}
                       ]
                   },
       ...