JSFiddle - React, Tailwind, and code Playground

by ajunlee

HTML

<body ng-app='app'>
    <div>
attrDirective : <div attr-directive></div>
elementDirective : <element-directive></element-directive>
classDirective : <div class="class-directive"></div>
commentDirective : <!-- directive:com-directive -->
        <hr />
attrDirective : <div my-directive></div>
elementDirective : <my-directive></my-directive>
classDirective : <div class="my-directive"></div>
commentDirective : <!-- directive:my-directive -->        
    </div>
</body>

CSS

div{
    border:solid 1px #ccc;
    padding:10px;
    margin:10px;
    
}

JavaScript

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

app.directive("attrDirective",function(){
    return {
        restrict:'A',
        template:"<div>hello world from attribute</div>"
    }
});

app.directive("elementDirective",function(){
    return {
        restrict:'E',
        template : "<div>hello world from element</div>"
    }
});
app.directive("classDirective",function(){
    return {
        restrict:'C',
        template : "<div>hello world from class</div>"
    }
});
app.directive("comDirective",function(){
    return {
        restrict:'M',
        template : "<div>hello world from comment</div>",
    }
});
app.directive("myDirective",function(){
    return {
        restrict:'EACM',
        replace:true,
        template : "<div>hello world from mix</div>",
    }
});