JSFiddle - React, Tailwind, and code Playground

HTML

<head lang="en">
	<title>Egghead Videos</title>
</head>
<body>

<div ng-app="superhero" ng-class="auth-directive">
	<superman></superman>
</div>
</body>

JavaScript

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

app.directive("superman",function () {
	return {
		restrict: "E",
		replace: true,
		template: "<div>Here I am to save the day</div>"
	}
}).directive('authDirective', function () {
		return {
			restrict: 'С',
			link: function (scope, elem, attrs) {
				//once Angular is started, remove class:
				elem.addClass('test-class');

				scope.$on('event:auth-loginRequired', function () {
					elem.hide();
				});
				scope.$on('event:auth-loginConfirmed', function (param) {
					elem.show();
                    param.scope.$close();
				});
			}
		};
	});