JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div ng-app="main" ng-controller="MainCtrl">
    <div dir1 dir3>
        <div dir2></div>
    </div>
</div>

JavaScript

window.main = angular.module('main', [])
.directive('dir1', function () {
    return {
        priority: 10,
        compile: function () {
            console.log('dir1 - compile');
            return {
                pre: function () {
                    console.log('dir1 - preLink');
                },
                post: function () {
                    console.log('dir1 - postLink');
                }
            };
        },
        controller: function () {
            console.log('dir1 - controller');
        }
    };
})
.directive('dir2', function () {
    return {
        compile: function () {
            console.log('dir2 - compile');
            return {
                pre: function () {
                    console.log('dir2 - preLink');
                },
                post: function () {
                    console.log('dir2 - postLink');
                }
            };
        },
        controller: function () {
            console.log('dir2 - controller');
        }
    };
})
.directive('dir3', function () {
    return {
        priority: 1,
        compile: function () {
            console.log('dir3 - compile');
            return {
                pre: function () {
                    console.log('dir3 - preLink');
                },
                post: function () {
                    console.log('dir3 - postLink');
                }
            };
        },
        controller: function () {
            console.log('dir3 - controller');
        }
    };
})
.controller('MainCtrl', function () {
    console.log('MainCtrl');
});