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

加载图像时的触发功能

1 个答案: