JSFiddle - React, Tailwind, and code Playground

by manojpcw

HTML

<!doctype html>
<body>

<div ng-app="superHeroModule">
    <div superhero speed strength flight> Superman </div><br/>
    <div superhero speed > Flash </div><br/>
    <div superhero strength > Hulk </div><br/>
</div>
    
</body>

JavaScript

var superHeroModule = angular.module("superHeroModule", []);

superHeroModule.directive('superhero',function(){
	return {
		scope:{},
		restrict : 'A',
		controller: function($scope){
			$scope.abilities = [];
			$scope.addStrength = function(){
				$scope.abilities.push("Strength");
			};

			$scope.addSpeed = function(){
				$scope.abilities.push("Speed");
			};

			$scope.addFlight = function(){
				$scope.abilities.push("Flight");
			};
		},

		link : function(scope,element){
			element.bind("mouseenter", function(){
				console.log(scope.abilities);
			});
		}
	};
});

superHeroModule.directive('speed', function(){
	return {
		restrict: 'A',
		link: function(scope, iElm, iAttrs, superheroCtrl) {
			scope.addSpeed();
		}
	};
});

superHeroModule.directive('strength', [function(){
	return {
		require: 'superhero',
		restrict: 'A', 
		link: function(scope, iElm, iAttrs, superheroCtrl) {
			scope.addStrength();
		}
	};
}]);

superHeroModule.directive('flight', [function(){
	return {
		require: 'superhero',
		restrict: 'A', 
		link: function(scope, iElm, iAttrs, superheroCtrl) {
			scope.addFlight();
		}
	};
}]);