JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <one>
  </one>
</div>

CSS

one,
two,
three {
  padding: 1rem;
  display: block;
}

one {
  border: 1px solid gray;
}

two {
  border: 1px solid green;
}

three {
  border: 1px solid red;
}

JavaScript

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

app.directive('one', ['$compile', function ($compile) {
  return {
    restrict: 'E',
    controller: [function () {
      this.columns = [];
      this.index = 1000;
			this.columnCount = 3;
      
      this.addColumn = function (column) {
        this.columns.push(column);
      };
    }],
    compile: function () {
      return {
        pre: function (scope, iElem, iAttrs) {
          //console.log(name + ': pre link => ' + iElem.html());
        },
        post: function (scope, iElem, iAttrs, ctrl) {
          //console.log(name + ': post link => ' + iElem.html());
          console.log('===> in one post link');
          for(var i = 0; i < ctrl.columnCount; i++){
             iElem.append('<two></two>');
          }console.log(ctrl.columns);
          $compile(iElem.contents())(scope);
          
        }
      }
    }
  }
}]);

app.directive('two', function () {
  return {
    restrict: 'E',
    require: '^one',
    compile: function () {
      return {
        pre: function (scope, iElem, iAttrs) {
          //console.log(name + ': pre link => ' + iElem.html());
        },
        post: function (scope, iElem, iAttrs, ctrl) {
          console.log('=====> in two post link');
          var column = {
            'index': ++ctrl.index
          };

          ctrl.addColumn(column);
        }
      }
    }
  }
});