JSFiddle - React, Tailwind, and code Playground

by hurgledurf

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body ng-app="mePracticing">
  <h1>HEADER</h1>

  <div ng-controller="practiceController">
    <practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive>
  </div>
</body>

JavaScript

angular.module('mePracticing', []);

(function() {
  'use strict';
  angular
    .module('mePracticing')
    .directive('practiceDirective', practiceDirective);

  function practiceDirective() {
    var directive = {
      restrict: 'AE',
      scope: {
        movie: '=',
        rating: '@',
        display: '&'
      },
      template: '<div>Movie: {{movie}}</div>' +
        "Enter a movie: <input type ='text' ng-model='movie'>" +
        "<div>Rating: {{rating}}</div>" +
        "<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>"
    };
    return directive;
  }
})();


(function() {
  'use strict';
  angular
    .module('mePracticing')
    .controller('practiceController', practiceController);

  function practiceController($scope) {
    $scope.movie = 'The Big Lebowski';
    $scope.rating = 1000101010;
    $scope.displayMovie = function(movie) {
      alert("Movie :" + movie);
    }
  }
})();