JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<body ng-app="app">
    <div ng-controller="SuperController">
        <superwoman class="classyClass">{{ totalSuperwomen }} Superwoman Here!</superwoman>
        
    </div>
    
</body>

CSS

.classyClass {
    font-size: 20px;
    color: red;
}

JavaScript

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

app.controller('SuperController', ['$scope', function($scope){
    $scope.totalSuperwomen = 20;
    $scope.addOne = function() {
        $scope.totalSuperwomen ++;
    }
}])

app.directive('superwoman', [function(){
	return {
		restrict: "E",
		link: function(scope, element, attrs) {
		    element.bind('mouseenter', function(){
                scope.addOne();
                scope.$apply();
               
            })
		}
	}
}])