JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div container>
      <div element ng-repeat="el in domElements" node="{{el.type}}">{{ el.type }}</div>
      <a href="#" ng-click="addElement('el1')">Add Element1</a>
      <a href="#" ng-click="addElement('el2')">Add Element2</a>
      <a href="#" ng-click="addElement('el3')">Add Element3</a>
    </div>
  </div>
</div>

CSS

[container] {
  padding: 1rem;
  border: 2px solid magenta;
  display: block;
}

a {
  padding: .4rem;
  display: inline-block;
  background: gray;
  color: white;
}

[node] {
  border: 2px solid red;
  display: block;
  padding: .4rem;
}

[el1] {
  background: green;
}

[el2] {
  background: blue;
}

[el3] {
  background: yellow;
}

JavaScript

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $compile) {
    $scope.domElements = [];

    $scope.addElement = function(type) {
      var domObject = {};
      domObject.type = type;
      domObject.content = [];

      $scope.domElements.push(domObject);
      console.log($scope.domElements);
    };
  })
  .directive('element', ['PromiseFactory', function(PromiseFactory) {
    return {
      restrict: 'A',
      link: function(scope, element) {
        var promise = PromiseFactory();
        promise.then(function(){
        	console.log(element.attr('node'));
        });
      }
    };
  }])
  .directive('el1', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
        console.log('linking');
      }
    }
  })
  .directive('el2', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {

      }
    }
  })
  .directive('el3', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {

      }
    }
  })
  .factory('PromiseFactory', ['$q', function($q) {
    return function() {
      deferred = $q.Deferred();
      setTimeout(function() {
        promise.resolve();
      }, 410);
      return deferred.promise;
    };
  }]);