JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
    <row property></row>
</div>

CSS

.child {
    background: red;
}
.row{
    padding: .4rem;
    background: #e3e3e3;
}

JavaScript

angular.module('app', [])
    .directive('row', ['$log', '$compile', function ($log, $compile) {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        priority: 5,
        template: '<div ></div>',
        compile: function () {
            return {
                pre: function (scope, ielement, attrs, ctrl) {
                    $log.log('==> row pre link');
                },
                post: function (scope, ielement, attrs, ctrl) {
                    var children = ['<child >child 1</child>', '<child >child 2</child>'];

                    children.forEach(function (child, i) {
                        ielement.append(child);
                    });
                    $compile(ielement.contents())(scope);
                }
            }
        }
    };
}])
    .directive('property', ['$log', function ($log) {
    return {
        priority: 3,
       	restrict: 'A',
        link: {
            pre: function (scope, ielement, attrs, ctrl) {
                $log.log(ielement.attr('_id'));
            }
        }
    };
}])
    .directive('child', ['$log', function ($log) {
    return {
        replace: true,
        template: '<div class="child"></div>'
    };
}]);