mrmurphy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="testApp">
  <mr-image src="https://api.mnky.es/v1/s/RnHx0Iy6to2Xovoc78DHwQ//2014-08-31%2008.32.07-2.jpg" width="400px"></mr-image>

  <script src="https://api.mnky.es/v1/s/TqNQESzK-EAOq2q9_Ju1oA//load-image.min.js"></script>

<script id="jsbin-javascript">
var app = angular.module('testApp', []);
app.directive('mrImage', function() {
  var wrapper = angular.element('<div id="imgdrop"></div>')
  var content = angular.element('<h1>Loading Image</h1>')
  return {
    restrict: 'E',
    compile: function(tElem, tAttrs) {
      tElem.replaceWith(wrapper)
      wrapper.append(content)

      // loadImage is a vendor lib
      loadImage(tAttrs.src, function(img) {
        content.replaceWith(img)
      }, {
        maxWidth: 400,
        orientation: true,
        canvas: true
      })
    }
  }
})
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="testApp">
  <mr-image src="https://api.mnky.es/v1/s/RnHx0Iy6to2Xovoc78DHwQ//2014-08-31%2008.32.07-2.jpg" width="400px"></mr-image>

  <script src="https://api.mnky.es/v1/s/TqNQESzK-EAOq2q9_Ju1oA//load-image.min.js"><\/script>

</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('testApp', []);
app.directive('mrImage', function() {
  var wrapper = angular.element('<div id="imgdrop"></div>')
  var content = angular.element('<h1>Loading Image</h1>')
  return {
    restrict: 'E',
    compile: function(tElem, tAttrs) {
      tElem.replaceWith(wrapper)
      wrapper.append(content)

      // loadImage is a vendor lib
      loadImage(tAttrs.src, function(img) {
        content.replaceWith(img)
      }, {
        maxWidth: 400,
        orientation: true,
        canvas: true
      })
    }
  }
})
</script></body>
</html>

## jsbin.befiye.js
var app = angular.module('testApp', []);
app.directive('mrImage', function() {
  var wrapper = angular.element('<div id="imgdrop"></div>')
  var content = angular.element('<h1>Loading Image</h1>')
  return {
    restrict: 'E',
    compile: function(tElem, tAttrs) {
      tElem.replaceWith(wrapper)
      wrapper.append(content)

      // loadImage is a vendor lib
      loadImage(tAttrs.src, function(img) {
        content.replaceWith(img)
      }, {
        maxWidth: 400,
        orientation: true,
        canvas: true
      })
    }
  }
})
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="testApp">
	<mr-image src="https://api.mnky.es/v1/s/RnHx0Iy6to2Xovoc78DHwQ//2014-08-31%2008.32.07-2.jpg" width="400px"></mr-image>

	<script src="https://api.mnky.es/v1/s/TqNQESzK-EAOq2q9_Ju1oA//load-image.min.js"></script>

	<script id="jsbin-javascript">
	var app = angular.module('testApp', []);
	app.directive('mrImage', function() {
	var wrapper = angular.element('<div id="imgdrop"></div>')
	var content = angular.element('<h1>Loading Image</h1>')
	return {
	restrict: 'E',
	compile: function(tElem, tAttrs) {
	tElem.replaceWith(wrapper)
	wrapper.append(content)

	// loadImage is a vendor lib
	loadImage(tAttrs.src, function(img) {
	content.replaceWith(img)
	}, {
	maxWidth: 400,
	orientation: true,
	canvas: true
	})
	}
	}
	})
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="testApp">
	<mr-image src="https://api.mnky.es/v1/s/RnHx0Iy6to2Xovoc78DHwQ//2014-08-31%2008.32.07-2.jpg" width="400px"></mr-image>

	<script src="https://api.mnky.es/v1/s/TqNQESzK-EAOq2q9_Ju1oA//load-image.min.js"><\/script>

	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('testApp', []);
	app.directive('mrImage', function() {
	var wrapper = angular.element('<div id="imgdrop"></div>')
	var content = angular.element('<h1>Loading Image</h1>')
	return {
	restrict: 'E',
	compile: function(tElem, tAttrs) {
	tElem.replaceWith(wrapper)
	wrapper.append(content)

	// loadImage is a vendor lib
	loadImage(tAttrs.src, function(img) {
	content.replaceWith(img)
	}, {
	maxWidth: 400,
	orientation: true,
	canvas: true
	})
	}
	}
	})
	</script></body>
	</html>