JSFiddle - React, Tailwind, and code Playground

by huannd

HTML

<div ng-app="myTest">

    <div ng-controller="myController">
        <h2 ng-click="reverseName()">{{name}}, Click vao toi de dao nguoc ten</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

CSS

h2 {
    cursor: pointer;
}
.directive {
    border: 5px solid #F5BF6E;;
    padding: 10px;
}

JavaScript

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

app.controller("myController",function($scope){
    $scope.name = "angularJS";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: false,
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name' />"
    };
});