JSFiddle - React, Tailwind, and code Playground

by sunnycpp

HTML

<!DOCTYPE html>
<html ng-app="components">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>    
  <script>
    var components= angular.module('components', []);

components.controller("myController",
    function ($scope) {
        var counter = 0;
        $scope.names = ["Sunny","Ashish","Metaobject"];
        $scope.clicked = function() {
            $scope.names[0] = "Sunny" + counter++;
        }
    }
);

components.directive('helloWorld', function() {
    var directiveObj =  {
        link:function(scope, element, attrs) {
            var strTemplate, strUserT = attrs.myUsername || "";
            console.log(strUserT);
            if(strUserT) {
                strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ;
            } else {
                strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ;
            }
            element.replaceWith(strTemplate);

        },
        restrict: 'E'
    };
    return directiveObj;
});

  </script>
</head>
<body>
    <div ng-controller="myController">
        {{names[0]}} {{names[1]}}
        <br/> <hello-world my-username="names[0]"></hello-world>
        <br/> <hello-world my-username="names[2]"></hello-world>
        <br/><button ng-click="clicked()">Click Me</button>
    </div>
</body>
</html>