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

您需要将加载事件绑定到 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'
                });
              });
            } 
        };
    }]);

Answer 2

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

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

将其应用于img内的ng-repeat元素，您就可以了。

请将此plunker视为证据。

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

2 个答案: