JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div ng-app="myModule">
    <div ng-controller="myController">
        <my-app my-name="{{name}}" color="color" change-color="changeColor()"></my-app>
    </div>
</div>

JavaScript

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

app.controller('myController', function($scope) {
	$scope.name = "hey";
    $scope.color = '#671717';
    $scope.changeColor = function () {
    	$scope.color = 'red';
    }
});

app.directive('myApp', function() {
    return {
        restrict: 'AE',
        template: '<div>hello<span style="color:{{color}}">hi</span><strong >mmm</strong>{{name}}<button ng-click="changeColor()">Click</button></div>',
        replace:true,
        scope: {
        	name : '@myName',
            color : '=',
            changeColor : '&'
        },
        link : function (scope,elem,attr) {
        	
        }
    }
})