JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<body ng-app="myApp" ng-controller="myController">
  <p>Hello {{name}}!</p>
  <my-directive name="name"></my-directive>

  <my-directive my-class="apples" my-callback="update">
    Apples{{name}}
  </my-directive>
  <my-directive my-class="pears" my-callback="update">
    Pears
  </my-directive>
  <my-directive my-class="bananas" my-callback="update">
    Bananas
  </my-directive>
  <my-directive my-class="grapes" my-callback="update">
    Grapes
  </my-directive>

</body>

CSS

.apples {
  background-color: yellow;
}

#isADirective {
  top: 300px;
}

#notADirective {
  top: 100px;
}

JavaScript

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

app.controller('myController', function($scope) {

});

app.directive('myDirective', [function() {
  return {
    restrict: 'AE',
    transclude: true,
    scope: {
      myClass: '@',
      name: '='
    },

    link: function(scope, element) {
      //scope.name = " Pat";
      element.bind('click', function() {
        scope.$apply(function() {
          scope.name = " Kent";
        });
        alert('Clicked !');
      });
    },
    template: '<div class="{{myClass}}" ng-click="myCallback($event)"><div ng-transclude></div></div>'
  }
}]);