JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<body data-ng-app="myApp" data-ng-strict-di>
    <div data-ng-controller="myCtrl">
        <a file-download></a>
    </div>
    <script>
    		angular.module('myApp', []);
        angular.module('myApp')
        	.factory('PubSub', PubSub)
        	.directive('fileDownload', fileDownload)
        	.controller('myCtrl', myCtrl);
          
        myCtrl.$inject = ['PubSub', '$timeout'];
        function myCtrl(PubSub, $timeout) {
        		console.log('main controller');
        		//$timeout(function() {
        		PubSub.publish('downloadFile', 'http://your/download/directory');
            //});
        }
        
        fileDownload.$inject = ['PubSub', '$timeout'];
        function fileDownload(PubSub, $timeout) {
        
        	function link(scope, iElement, iAttrs) {
          		console.log('pre: ', arguments);
          }
        
        	return {
          		restrict: 'A',
              compile: function(iElement, iAttrs) {
              		console.log('compile: ', arguments);
              		function download(event, url) {
                      console.log('Pub Sub: ', url);
                      var iFrame = iElement.find("iframe");
                        if (!(iFrame && iFrame.length > 0)) {
                            iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                            iElement.append(iFrame);
                        }
                        iFrame.attr("src", url);
                  }
              
              		PubSub.subscribe('downloadFile', download);
                  
                  return {
                  		pre: function() {
                      		console.log('pre: ', arguments);
                      },
                      post: function() {
                      		console.log('post: ',...