JSFiddle - React, Tailwind, and code Playground

by Tyler Eich

HTML

<body ng-app="app">
    <div ng-controller="Ctrl">
        <img img-load="onLoad()" src="http://lorempixel.com/1920/1080" />
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    max-height: 100%;
}

JavaScript

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

app.directive('imgLoad', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var loadHandler = $parse(attr.imgLoad);
            element.on('load', function() {
                scope.$apply(function() {
                    loadHandler(scope);
                });
            });
        }
    };
}]);

function Ctrl($scope, $timeout) {
    $scope.onLoad = function() {
        $timeout(alert('Image Loaded'));
    };
}