JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="dirAppModule">
  <script type="text/ng-template" id="text.html">
  <div>
    <h3 ng-transclude></h3>
  </div>
  </script>
  <div ng-controller="compileCtrl">
    <level-one>
      <level-two>
        <level-three>
          hello,{{name}}
        </level-three>
      </level-two>
    </level-one>
  </div>
</body>

CSS

*{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
    h3 {
      color:#CB2027
    }

JavaScript

var appModule = angular.module('dirAppModule',[]);

appModule.controller('compileCtrl',function($scope){
    $scope.name="code_bunny"
});
appModule.directive('levelOne',function(){
    return {
        restrict:'E',
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelOne');
            return {
                pre:function(){
                    console.log('pre→'+'levelOne')
                },
                post:function(){
                    console.log('post→'+'levelOne')
                }
            }
        }
    }
});
appModule.directive('levelTwo',function(){
    return {
        restrict:'E',
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelTwo');
            return {
                pre:function(){
                    console.log('pre→'+'levelTwo')
                },
                post:function(){
                    console.log('post→'+'levelTwo')
                }
            }
        }
    }
});
appModule.directive('levelThree',function(){
    return {
        restrict:'E',
        compile:function(tEle,tAttrs,trans){
            console.log('compile→'+'levelThree');
            return {
                pre:function(){
                    console.log('pre→'+'levelThree')
                },
                post:function(){
                    console.log('post→'+'levelThree')
                }
            }
        }
    }
});