JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
    <row uid></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: 8,
        template: '<div class="row" ng-transclude></div>',
        controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
            $log.log('==> row controller');
            $log.log($element.attr('_id'));
        }],
        compile: function () {
            return {
                pre: function (scope, ielement, attrs, ctrl) {
                    $log.log('==> row pre link');

                    $log.log(ielement.attr('_id'));
                },
                post: function (scope, ielement, attrs, ctrl) {
                    $log.log('==> row post link');
                    $log.log(ielement.attr('_id'));
                }
            }
        }
    };
}])
    .directive('uid', ['$log', function ($log) {
    return {
        priority: 9,
        restrict: 'A',
        link: {
            pre: function (scope, ielement, attrs, ctrl) {
                ielement.attr('_id', 23980);
                $log.log('==> in uid pre link');
                $log.log(ielement.attr('_id'));
            }
        }
    };
}])
    .directive('child', ['$log', function ($log) {
    return {
        replace: true,
        template: '<div class="child"></div>'
    };
}])



;