JSFiddle - React, Tailwind, and code Playground

by BinaryMuse

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js"></script>
<div ng-app>
  <div ng-controller="MainController">
      Main
      <button ng-click="addRoot()">Add Root</button>
        <div class ="firstLevel" ng-repeat="firstlevel in mainLevel" ng-controller="MainController" ng-include="'templateLevel2.html'"></div>
  </div>
</div>

<script type="text/ng-template" id="templateLevel2.html">
<div class="box" >
    <!-- I want to fire up a function when this element gets loaded when called from template3  THIS DIV IS THE TARGET !! LOOK BELLOW FOR SOURCE-->
    <div class ="secondLevel" id="firstlevel.id" class="Element-I-want-To-See-When-It-Is-Loadded" ng-controller="MainController"> First Level
        <button id="secondLevel.id" ng-repeat="secondlevel in firstlevel.options" ng-click="addChild(secondlevel)">Add Second Level</button>
        <button ng-click="addOption(firstlevel)">Add Options</button>
    </div>
    
    <div  ng-repeat="secondlevel in firstlevel.options" ng-include="'templateLevel3.html'"> </div>
   </div>
</script>

<script type="text/ng-template" id="templateLevel3.html">
    
<!-- This div (repeated for each children) will be the one I want to connect(this is the source) to template's div2 that where I said that it was the target-->
<div class="box">    
    <div class ="thirdLevel" id="second-{{$index}}" >Second Level</div>
      <div vector-draw-directive class ="thirdlevel" ng-repeat="firstlevel in secondlevel.children "ng-include="'templateLevel2.html'" onload="loaded()">
      </div>
   </div>
</script>

CSS

.firstLevel{
    border: 1px solid black;
    margin: 10px;
}
.secondLevel{
    border: 1px solid red;
    margin: 10px;
}
.thirdLevel{
    position: relative;
    display:block;
    margin: 10px;
    border: 1px solid green;
}

JavaScript

var app = angular.module('project', []);

app.factory('MyService', function () {

    var children_counter = 1;
    var options_counter = 2;
    
    var mainLevel = [];

    function getAllLevels() {
        return mainLevel;
    }
    
    function addRoot(){
        mainLevel.push(
            {
                allName: 'FirstLevel',
                id: 'c-'+children_counter++,
                options: []
            }
        );
    }
    
    function addChild(secondLevel) {
        console.log('in addChild Service');
        secondLevel.children.push(
        {
            Name: 'FirstLevel',
            parent_id: secondLevel.id,
            id: 'c-'+children_counter++,
            options: []
        }
        );
        //return the newly created child to be connected to it's parent(this secondLevel element)
        return secondLevel.children[secondLevel.children.length-1];
    }

    function addOption(firstLevel) {
        firstLevel.options.push(
        {
            Name: 'SecondLevel',
            id: 'o-'+options_counter++,
            children: []
        }
        );
    }

    //reveal the public pointers so that the controllers
    //can access the functions through these "pointers"
    return {
        addOption : addOption,
        addRoot : addRoot,
        addChild : addChild,
        getAllLevels: getAllLevels
    };
});

function MainController($scope, MyService) {
    $scope.MyService = MyService;
    
    $scope.mainLevel = MyService.getAllLevels();
    
    $scope.addOption = function(firstLevel) {
        MyService.addOption(firstLevel);
    }
    $scope.addRoot = function() {
        MyService.addRoot();
    }
    
    $scope.addChild = function(secondLevel) {
        var newChild = MyService.addChild(secondLevel);
        /*jsPlumb.connect({
					source: newChild.parent_id,
					target: newChild.id,
				});*/
    }
    
    $scope.loaded = function() {
        alert('loaded')
    }
}



app.directive('vectorDrawDirective',...