Angular: Image Onload Catching

http://angularjs.org/

by Ankit Patidar

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<h4>Horizontal image has shadow from above , vertical - from below</h4>
<a href="http://en.wikipedia.org/wiki/Andi_Gutmans" target="_blank">
<img ng-src="http://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png" class="horizontal" imageonload orientable />
<a href="http://kids.gov.il/health/lazies/en/" target="_blank">
<img ng-src="http://www.galim.org.il/pools/files/GalimGifs/GalimGifPicture/12888.jpg" class="horizontal" imageonload orientable />
</a>
{{loaded}}

CSS

img{margin: 50px;  border-radius: 20px; border: 1px solid #ddd; vertical-align: middle;}

.vertical{   
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);    
}

.horizontal{
    box-shadow: 0 -5px 5px rgba(0,0,0,0.3);    
}

JavaScript

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

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});
app.directive('imageonload', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                //alert('image is loaded');
                scope.$apply(scope.loaded='Hello1');

            });
            element.bind('error', function(){
               // alert('image could not be loaded');

                scope.$apply(scope.loaded='Hello');
            });
        }
    };
});