JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<!doctype html>
<html>
    <head>
        <script src="//cdnjs.cloudflare.com/ajax/libs/headjs/0.96/head.min.js"></script>
    </head>
<body>
<div class="foo" angular-directive></div>
</body>
</html>

CSS

body { margin: 20px; }

.foo {
  width: 100px;
  height: 100px;
  background: #003366;
  cursor: pointer;
  position: absolute;
}

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

myApp.directive('angularDirective', function() {
  var el;

  //load a random external plugin, in this case it's just jQuery
  head.js('//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js', function() {
    //do something with jQuery so we know it worked
    jQuery(el).animate({
      top: '+=100' 
    });
  });
    
    
     
                head.js('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js', function () {
                    
                        console.log('done');
                    
                });
     
            
    
    
    
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      el = element;
    }
  }  
});