JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<div ng-app>
    <script type="text/ng-template" id="element">
    <li ng-controller='NodeController' 
            ng-mouseenter='mouseEnter()'
            ng-mouseleave='mouseLeave()'
            class="{{ class }}">
        <span>{{ name }} {{ $index }}</span> |
        <a ng-click="create()">Create</a> |
        <a ng-click="delete()">Delete</a>
        <ul ng-repeat="data in children" ng-include="'element'"></ul>
    </li>
     </script>
    <h1>Test</h1>
    <ul ng-include="'element'" ng-init="data={'name':'child'};"></ul>
</div>

CSS

ul {
    padding-left: 20px;
}
.hovered {
    border: 1px solid #ccc;
    padding: 0px;
}
li {
    padding: 1px;
}

JavaScript

function NodeController($scope, $element, $browser) {
    console.log($element);
    
    $scope.name = $scope.data.name.concat(' ', $scope.$id);
    $scope.children = [];
    $scope.class = "";

    $scope.create = function () {
        $scope.children.push({'name': 'child'});
    };
        
    $scope.delete = function () {
        $element.css({display: "none"});
        $browser.defer(function() {
            $scope.$emit('$childDeleted');
        });
    };

    $scope.mouseEnter = function () {
        // console.log("mouseEnter", $scope.$id);
        $scope.class = 'hovered';
    };
        
    $scope.mouseLeave = function () {
        // console.log("mouseLeave", $scope.$id);
        $scope.class = '';
    };
        
    $scope.onChildDeleted = function ($event) {
        if ($event.targetScope == $event.currentScope) {
            return;
        }
        $event.cancel();
        $scope.children.splice($event.targetScope.$index, 1);
    };
        
    $scope.$on('$childDeleted', $scope.onChildDeleted, this);
    
}