angularjs - Triggering function when image is loaded -
i creating ionic application. in application, have image want resize (itself , map area associated) when loading of image finished. problem don't know directive use call (it doesn't seems ng-init).
example of want :
<div class="ng-scope" ng-controller="screenshotctrl"> <img id="main_img" class="rwdimgmap" ng-src="img/home.jpg" usemap="#map_main_img" width="360" height="569" ng-directive_i_dont_know_of="thefunctioniwanttocall"> <map name="map_main_img"> <area shape="rect" coords="358,567,360,569" alt="image map" style="outline:none;" title="image map" /> <area href="#/homemenu" shape="poly" coords="359,246,282,91,16,220,182,557,356,474" style="outline:none;" target="_self" /> </map> </div>
how ?
you can create custom directive so:
myapp.directive('onimageload', function() { return { restrict: 'a', link: function(scope, element, attr) { element.addclass('image-not-loaded'); element.bind('load', function() { element.removeclass('image-not-loaded'); // custom code }); } }; });
and use in html:
<img src="...." on-image-load />
Comments
Post a Comment