JSFiddle - React, Tailwind, and code Playground

by amullins

HTML

<div ng-app="srv">
    <div ng-controller="alertShowingController"></div>
    <div my-alerts=""></div>
</div>

CSS

.alert-warning {
    background: red;
    color: white;
}

JavaScript

var srv = angular.module('srv', []);
srv. factory('alertService', ['$timeout', function($timeout){
    var alertService = this;
        alertService.alertNeeded = false;
        alertService.alertClass = '';
        alertService.alertMessage = '';
        alertService.setAlertNeeded = function(){
            alertService.alertNeeded = true
        };
        alertService.setAlertClass = function(type){
            if(type === 'warning')
                alertService.alertClass = 'alert-warning';
            if(type === 'success')
                alertService.alertClass = 'alert-success';
            if(type === 'info')
                alertService.alertClass = 'alert-info';
            if(type === 'danger')
                alertService.alertClass = 'alert-danger';
        };
        alertService.setAlertMessage = function(message){
            alertService.alertMessage = message;
        };

        return {
            showAlert: function(cssClass, msg){
                alertService.setAlertNeeded();
                alertService.setAlertClass(cssClass);
                alertService.setAlertMessage(msg);
            },
            
            alertClass: function() { return alertService.alertClass; },
            
            alertMessage: function() { return alertService.alertMessage; },
            
            alertNeeded: function() { return alertService.alertNeeded; }
        };
 }]).
 directive('myAlerts', ['alertService', function(alertService){
        return {
            restrict: 'A',
            template: '<div ng-class="alertClass()" ng-show="alertNeeded()">{{alertMessage()}}</div>',
            link: function(scope){                   
                scope.alertNeeded = alertService.alertNeeded;
                scope.alertMessage = alertService.alertMessage;
                scope.alertClass = alertService.alertClass;
            }
        }
    }]).
 controller('alertShowingController', ['$scope', 'alertService', function($scope, alertService){
   ...