JSFiddle - React, Tailwind, and code Playground

by t4gedieb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js"></script>
<div class="ng-cloak" ng-app="test-me" ng-init="doHighlight=false">
    <div>
        <h3>Normal example with template directive</h3>
        <button type="button" ng-click="doHighlight =! doHighlight">run example</button>         <template-with-ng-class-on-root highlight="true" ng-show="doHighlight"/>
    </div>    
    <hr/>
    <div>
        <h3>A directive compiles another directive and add the template manualy</h3>
        <button compile-template-manualy>run example</button>
    </div>
    <hr/>
    <div>
        <h3>A directive compiles another directive and add the template manualy</h3>
        <button compile-template-manualy-not-working>run example</button>
    </div>
</div>

CSS

.highlight {
    color: green;
    font-size: larger;
}

.highlight-template {
    color: red;
    font-size: large;
}

.highlight-sub {
    color: blue;
    font-size: large;
}

JavaScript

angular.module('test-me', ['ngAnimate'])
.directive('compileTemplateManualyNotWorking', function($compile, $timeout) {
    return {
        restrict: 'EA',
        scope: true,
        compile: function (tElem, tAttrs) {

            var template = '<template-with-ng-class-on-root highlight="doHighlight"/>';
            var tooltipLinker = $compile( template );
            return function link ( scope, element, attrs ) {
                          console.log('link', element);

              scope.doHighlight=true;  
                
              scope.showTemplate =function() {              
                  var tooltip = tooltipLinker(scope, function(){});
                  scope.$digest();           
                  element.after(tooltip);
                    
                  // Get contents rendered into the tooltip
                 scope.$digest();                
              };
                
              element.bind('click', scope.showTemplate);
            }            
        }
    };

})

.directive('compileTemplateManualy', function($compile, $timeout) {
    return {
        restrict: 'EA',
        scope: true,
        compile: function (tElem, tAttrs) {
            console.log('compile');
            var template = '<template-with-ng-class-on-root highlight="doHighlight"/>';
            var tooltipLinker = $compile( template );
            return function link ( scope, element, attrs ) {
                          console.log('link', element);

              scope.doHighlight=true;  
                
              scope.showTemplate =function() {              
                  var tooltip = tooltipLinker(scope, function(){});
                  //scope.$digest();           
                  element.after(tooltip);
                    
                  // Get contents rendered into the tooltip
                 scope.$digest();                
              };
                
              element.bind('click', scope.showTemplate);
       ...