JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div ng-app="myapp" ng-controller="MyCtrl">
    
    <div ng-show="show == 'one.html'">{{1+2}}</div>

<script type="text/ng-template" id="one.html">
    <h1>{{message}}</h1>
</script>
<script type="text/ng-template" id="two.html">
    <h1>2</h1>
</script>
<script type="text/ng-template" id="three.html">
    <h1>3333</h1>
</script>
    
    <button ng-click="show = 'one.html'; done=true" type="button">1</button>
    <button ng-click="show = 'two.html'; done=false;" type="button">2</button>
    <button ng-click="show = 'three.html'" type="button">3</button>
    
    <span ng-if="!done">Loading...</span>
  
    <div class="dmv" dmv="Needs Coffe" />
    
    <div ng-include="show"></div>
</div>

JavaScript

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

module.controller('MyCtrl', function MyCtrl($scope) {
    $scope.show = "one.html";
    $scope.message = "blah,blah";
});

module.directive('dmv', function() {
    return {
        templateUrl: "one.html",
        scope: true,
        restrict: 'EA',
        link: function(scope, element,  attr) {
            console.log(arguments)
            console.log("dmv", attr.dmv);
            scope.message = attr.dmv;
        }
        
        
    };
});