JSFiddle - React, Tailwind, and code Playground

by hasan2002

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="app2">
    
    <div ng-controller="MainController">
        {{title}}
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" message="{{alert.message}} {{$index}}" on-close="alertClosed($index)"></alert>
        <button class="btn btn-primary" ng-click="call()">Call</button>
        <ttag>hello</ttag>
    </div>
</div>

JavaScript

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

app.directive('ttag',function(){
    return{
        template:'<div ng-transclude></div>',
        replace:true,
        restrict: 'E',
        transclude: true
    };
});

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

app1.factory('alertService', function($rootScope){
    
    $rootScope.alerts = [];
    $rootScope.alertSequence = 0;
    $rootScope.alertClosed = function(index){
            console.log($rootScope.alerts);
            console.log('alert ' + index + ' is closed');
            $rootScope.alerts.splice(index, 1);
            console.log($rootScope.alerts);
        };
    
    return {
        show: function postLink(alert){
            if(alert.message == undefined) return;
            
            if(alert.type == undefined){
                alert.type = 'info';
            }
            
            $rootScope.alertSequence = $rootScope.alertSequence + 1;
            
            alert.index = $rootScope.alertSequence;
            
            $rootScope.alerts.push(alert);
        },
        
        clear: function(){
              $rootScope.alerts = [];
        }
            
    };
});



app1.directive('alert', function(){
    return {
        template:'<div class="alert alert-{{type}} alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{message}}</div>',
        replace:true,
        restrict: 'E',
        transclude: true,
        scope:{type:'@',message:'@', onClose:'&'},
        link: function(scope, element, attrs){
            console.log(scope);
            console.log(attrs);
            
            $(element).on('closed.bs.alert', function(){
                  scope.$apply(function(){
                      console.log('close');
                      scope.onClose({});
                  });
                });
        }
    };
});

app1.factory('fosHttpInterceptor',function($q, alertService){
  ...