图片加载时触发函数

Question

我正在创建一个离子应用程序。在这个应用程序中，我有一个图像，当图像加载完成时，我想调整它的大小（它本身和关联的地图区域）。问题是不知道用哪个指令调用（好像不是ng-init）。

我想做的事的例子：

<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>

如何操作？

Answer 1

您可以像这样创建自定义指令：

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');
                // Your custom code like so
            });
        }
    };
});

并在您的 HTML 中使用：

<img src="...." on-image-load />

图片加载时触发函数

Triggering function when image is loaded

angularjs

ionic