JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>

//URL: http://www.thinkster.io/pick/sMgLuIxf02/angularjs-directive-to-directive-communication
    
var app = angular.module('superApp', []);
 
app.directive("superhero", function () {
  return {
    restrict: "E",
    
    scope: {},
 
    controller: function ($scope) {
      $scope.abilities = [];
 
      this.addStrength = function() {
        $scope.abilities.push("strength");
      };
 
      this.addSpeed = function() {
        $scope.abilities.push("speed");
      };
 
      this.addFlight = function() {
        $scope.abilities.push("flight");
      };
    },
 
    link: function (scope, element) {
      element.addClass("button");
      element.bind("mouseenter", function () {
        console.log(scope.abilities);
      });
    }
  };
});
    
app.directive("strength", function() {
    return {
      require: "superhero",
      link: function (scope, element, attrs, superheroCtrl) {
        superheroCtrl.addStrength();
      }
    };
  });
    
app.directive("speed", function() {
  return {
    require: "superhero",
    link: function (scope, element, attrs, superheroCtrl) {
      superheroCtrl.addSpeed();
    }
  };
});
 
app.directive("flight", function() {
  return {
    require: "superhero",
    link: function (scope, element, attrs, superheroCtrl) {
      superheroCtrl.addFlight();
    }
  };
});
</script>

<div ng-app="superApp">
  <superhero flight speed strength>Superman</superhero>
  <superhero speed>The Flash</superhero>
</div>