Angular: Empty Fiddle

http://angularjs.org/

by Thomas Burleson

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<jl-node-builder level-deep="0"></jl-node-builder>

CSS

.node {
    padding-left: 20px;
}

.hover0 {
    border: 3px solid #2f4f4f;
}

.hover1 {
    border: 3px solid #adff2f;
}

.hover2 {
    border: 3px solid #ffb6c1;
}

.hover3 {
    border: 3px solid #ff7f50;
}

.hover4 {
    border: 3px solid #006400;
}

JavaScript

angular.module('myApp', [])
    .directive('jlNodeBuilder', function ($compile, $log) {

        return {
            restrict:'E',
            scope:{
                levelDeep:'evaluate'
            },
            link:function (scope, element, attrs) {
                var hoverStyles = ["hover0", "hover1", "hover2", "hover3", "hover4" ];         
 
                scope.name = "node depth: " + scope.levelDeep;
                scope.style = "node";           
                    
                scope.mouseOver = function () {
                    var j = Math.min( scope.levelDeep, 4 );
                    scope.style = hoverStyles[j];
                };

                scope.mouseOut = function () {
                    scope.style = "";
                };

                scope.create = function () {
                    var levelDeep = scope.levelDeep + 1;
                    var childNode = $compile('<jl-node-builder level-deep="'+ levelDeep +'"></jl-node-builder>')(scope);
                    element.children().append(childNode);
                }

                scope.delete = function () {
                    element.remove();
                }
            },

            template:'<div ng-mouseover="mouseOver()" ng-mouseout="mouseOut()" class="node {{style}}">' +
                '<span>{{ name }}</span> | <a ng-click="create()">Create</a> | <a ng-click="delete()">Delete</a>' +
                '</div>'
        }
    });