用于在图像加载时绑定 Angular 指令的事件

Posted 2023-02-22

【中文标题】用于在图像加载时绑定 Angular 指令的事件

【英文标题】：Event to use for binding Angular directive on image load

【发布时间】：2016-05-20 20:46:16

【问题描述】：

我正在尝试将 this jQuery plugin 集成到 Ionic 应用程序中。我对创建一个 Angular 指令来包装插件的想法感到满意，但我正在努力让它工作。

指令如下：

angular.module('myapp.directives', [])

.directive('flipbook', ['$rootScope', function ($rootScope)  
    return  
        restrict: 'A',
        link: function (scope, elem, attrs)  
          elem.bind('load', function ()  
            $(elem).flipbook(
              speed: 125,
              autoplay: false,
              play: 'button#playbutton',
              stop: 'button#pausebutton',
              rewind: 'button#rewindbutton'
            );
          );
         
    ;
]);

这是相关的模板：

<ion-view view-title=" album.title ">
<ion-content>

<div flipbook>
    <div class="gallery-item" ng-repeat="photo in album.photos | orderBy: 'created_at'">
        <img ng-if="photo.thumbnail" ng-src=" photo.thumbnail "></img>
    </div>                     
    </div>                     
</div>

</ion-content>
</ion-view>

使用 AJAX 请求获取照片，然后使用 ng-repeat 拉入。

使用 Chrome 调试器，我已经能够确定 link 函数被调用，但绑定到 load 事件的函数永远不会被调用。所以大概我没有绑定到正确的事件。

鉴于我希望图像在初始化 jQuery 插件之前完成加载，我应该绑定到什么事件？

【参考方案1】：

遗憾的是，当 ng-repeat 完成时，没有触发内置事件。但是，您可以创建一个简单的指令来执行此操作：

app.directive('postRepeat', function() 
  return function(scope, element, attrs) 
    if (scope.$last)
      $('#book').flipbook();
    
  ;
);

将它应用到ng-repeat 内的img 元素上就可以了。

将此plunker 视为证据。

【参考方案2】：

您需要将 load 事件绑定到 IMG 标签而不是 DIV。将elem 替换为elem.find("img")：

angular.module('myapp.directives', []).directive('flipbook', ['$rootScope', function ($rootScope)  
        return  
            restrict: 'A',
            link: function (scope, elem, attrs)  
              elem.find("img").bind('load', function ()  
                $(elem).flipbook(
                  speed: 125,
                  autoplay: false,
                  play: 'button#playbutton',
                  stop: 'button#pausebutton',
                  rewind: 'button#rewindbutton'
                );
              );
             
        ;
    ]);

【讨论】：

不，不能解决问题。在触发时，图像尚未使用ng-repeat 插入，因此elem.find("img") 不返回任何内容。 album 字段是使用 AJAX 请求填充的，其中包含照片 URL，因此图像只有在完成后才会出现。

更正，图片标签还没有被插入——显然，图片本身只有在标签创建后才会被插入。