JSFiddle - React, Tailwind, and code Playground

by d m

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
  <title>My Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"/></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"/></script>
  <script src="js.js"/></script>
  <link rel="stylesheet" href="css.css"/>
</head>

<body ng-app="directiveTraining">
  <section ng-controller="myCtrl">
    <p>Hey I am a {{iam}}</p>
  </section>


  <my-perfect-directive></my-perfect-directive>




</body>
</html>

JavaScript

myApp = angular.module("directiveTraining", []);

myApp.controller('myCtrl', ['$scope', myCtrl]);

 function myCtrl($scope){
  $scope.iam ="Mightyyyy SCOPE!!!"
};

(function () {
  myApp.directive('myPerfectDirective', function(){
    return{
      restrict: 'E',
      scope: {
        data: '='
      },
      template: '<p>my perrrrrrfeccct directivve</p>',
      templateUrl: 'book-widget.html'
    }
  });
});