JSFiddle - React, Tailwind, and code Playground

by steveukx

HTML

<div id="log"></div>
<div ng-app="foo">
    <div dir-a></div>
    <div dir-a></div>
    <div dir-b></div>
    <div dir-b></div>
</div>

CSS

#log {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: 0.25rem;
    font: 0.75rem/1.4 tahoma;
    max-height: 5rem; overflow: auto;
}
#log span {
    display: block
}

JavaScript

function log(what) {
    var logged = document.createElement('span');
    logged.appendChild(document.createTextNode(what));
    document.getElementById('log').appendChild(logged);
}

angular.module('services', [])
.factory('blah', function() {
    log('blah constructing'); return {val: Math.random()};
});

angular.module('foo', ['services'])
.directive('dirA', function() {
    return {
        template: "<span>hello</span>",
        controller: function(blah) {
            log('dirA controller constructing');
        }
    }
})
.directive('dirB', function() {
    return {
        template: "<span>hello</span>",
        controller: function(blah) {
            log('dirB controller constructing');
        }
    }
});