JSFiddle - React, Tailwind, and code Playground

by bateast

HTML

<body ng-app="app">
    <div parent-high parent-low>
        <div child-high child-low></div>
        <div child-high2 child-low2></div>
    </div>
</body>

JavaScript

function log(str) { angular.element(document.body).append(str + '<br>'); }
function factory(isParent, isHigh, iname) {
    var el = isParent ? 'parent' : 'child';
    var pri = isHigh ? 'high' : 'low';
    var name = iname || el + '-' + pri;
    
    return {
        priority: isHigh ? 100 : 0,
        controller: function() {
            log(name + ' controller');
        },
        compile: function() {
            log(name + ' compile');
            return {
                pre: function() { log(name + ' pre-link'); },
                post: function() { log(name + ' post-link'); }
            };
        }
    };
}

angular.module('app', [])
.run(function($rootScope) {
    log('initialize phase');
    $rootScope.$watch(function() { log('watch!'); }, function() { log('watched!'); })
})
.directive('parentHigh', function() { return factory(true, true); })
.directive('parentLow', function() { return factory(true, false); })
.directive('childHigh', function() { return factory(false, true); })
.directive('childLow', function() { return factory(false, false); })
.directive('childHigh2', function() { return factory(false, true, 'child-high-2'); })
.directive('childLow2', function() { return factory(false, false, 'child-low-2'); });