JSFiddle - React, Tailwind, and code Playground

by egamonal

HTML

<div ng-app="sodemo">
    <div ng-controller="SOCtrl">
        {{ greeting }}
        <demo></demo>
    
        <!-- version 1, without controller -->
        <div     
            data-ng-element-ready="console.log('COMPILED!')"
            data-ng-show="showBasicHtml"
            data-ng-if="analysis.type">
        </div>
    </div>
</div>

JavaScript

var app = angular.module('sodemo',[]);

app.directive('demo', function() {
    return {
        restrict: 'E',
        template: '<span>This is a demo</span>'
    }
});

/* 
asked in http://stackoverflow.com/questions/23719622/why-does-the-link-function-of-my-directive-never-get-called

version 1 
*/
app.controller('SOCtrl', function($scope) {
    console.log('reached SOCtrl');
    $scope.greeting = "hello SO";
    $scope.analysis = {'type' : false};
    $scope.showBasicHtml = true;
});

app.directive('ngElementReady', ['$window', function($window) {
    return {
        restrict: "A",
        compile: function($element, $attributes) {
            console.log('compiling');
            return function($scope, $element, $attributes) {
                console.log("Reached the link fn", $attributes);
                $window.eval($attributes.ngElementReady);
            }
        }
       
    };
}]);