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

Question

我正在尝试将 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 插件之前完成加载，我应该绑定到什么事件？

Answer 1

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

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

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

将此plunker 视为证据。

Answer 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'
                });
              });
            } 
        };
    }]);