JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app='app' ng-init='$ctrl.show=true'>
  <button type='button' ng-click='$ctrl.show = false;'>
    kill
  </button>
  <app ng-if='$ctrl.show'></app>
  <components-host></components-host>
</div>

JavaScript

console.clear();

angular.module('app', [])

.component('app', {
	template: `
  	<button type='button' ng-click='$ctrl.add()'>+</button>
    <hr>
  `,
  controller: function($scope, componentsQueue){
  	var ctrl = this;
		this.add = function(){
    	componentsQueue.open('message-box', {
      	title: 'Error',
        message: 'Problem occured in index.js file.'
      }, $scope);
    };
    this.$onDestroy = function(){
    	console.log('killed');
    };
  }
})

.component('componentsHost', {
	template: `
  	<div ng-repeat='component in $ctrl.queue.components'>
    	{{ component.name }} {{ component.id }} <button type='button' ng-click='$ctrl.resolve(component)'>x</button>
    </div>
  `,
	bindings:{},
  controller: function(componentsQueue){
  	this.queue = componentsQueue;
    this.resolve = function(component){
			component.bindings.promise.resolve(123);
    };
  }
})

.factory('componentsQueue', function($q){
	var id = 0;
	var api = {
  	components: [],
  	open: function(name, bindings, $scope){
	    var token = 'next--' + (id++);
    	var promise = $q(function(resolve, reject){
        api.components.push({
        	id: token,
          name: name,
          bindings: angular.extend(bindings, {
            promise:{resolve: resolve, reject: reject}
          })
        });
      });
      promise.then(function(res){
      	var i;
        for(i=0; i<api.components.length; i++){
        	if(api.components[i].id === token){
          	api.components.splice(i, 1);
          }
        }
      });
      $scope.$on('$destroy', function(){
      	console.log('destroyed');
      });
      console.log($scope);
      return promise;
    }
  };
  return api;
})