JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <row settings="{cols: 3}">
  </row>
</div>

CSS

.placeholder {
  padding: 1rem;
  display: block;
  border: 2px solid gray;
}
[block]{
  display: block;
  padding:.3rem;
  border: 1px solid grey;
}

JavaScript

angular.module('app', [])
  .directive('row', ['$compile', function($compile) {
    return {
      transclude: true,
      replace: true,
      scope: {
        settings: '='
      },
      controller: ['$scope', '$element', function($scope, $element) {
        $scope.cols = [{
          col: 3
        }, {
          col: 3
        }, {
          col: 3
        }, ];
      }],
      restrict: 'E',
      link: function(scope, iElement, attrs, ctrl, trns) {
      	var columns = scope.cols;
        angular.forEach(columns, function(col, i){
        	var column = angular.element('<column />', {span: col.col});
          iElement.append(column);
        });
        console.log('linking row');
        $compile(iElement.contents())(scope);
      },
      template: '<div class="row" ng-transclude></div>'
    };
  }])
  .directive('column', function() {
    return {
      transclude: true,
      restrict: 'E',
      scope: {
        span: '@'
      },
      link: function() {
        console.log('linking column');
      },
      template: '<div block class="col-md-{{ span }}" ng-transclude></div>'
    };
  });