Question

如果我的部分网页重新呈现，我想显示加载指标。从重新渲染的部件发出的事件会注意到它。

我使用http://desandro.github.io/imagesloaded/

在我的指令中：

app.directive('pendingIndicator', function(){
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.$on('pending', function(){
                scope.imgLoad = imagesLoaded( element );
            });
        }
    };
});

不幸的是，如果我尝试将imagesLoaded()包装在事件监听器（$on）或$watch中，则会引发错误。

来自控制台的错误消息：

TypeError: 'undefined' is not an object (evaluating 'eventie.bind')

有人知道发生了什么，为什么这可能不起作用？

Answer 1

我能够使用ImagesLoaded插件，如this plunkr所示。

这只是一个指向正确方向的例子。理想情况下，您将提取ImagesLoaded插件的逻辑（不再需要Jquery）并完全在AngularJS中执行此操作。

我认为您希望以不同方式监听ImagesLoaded事件。这是修改后的指令代码w /一些评论/建议。

angular.module('myApp', []).
  directive('pendingIndicator', function(){
    return {
        restrict: 'A',
        link: function(scope, element) {
            // setup the container for ImagesLoaded ... note instead of using
            // this directive on an individual image, you may consider using
            // it on the element that contains many images...
            scope.imagesLoaded = imagesLoaded(element);
            // start your progress/loading animation here
            // (or whenever you attempt to load the images)
            scope.imagesLoaded.on('always', function() {
              console.log('always event: Triggered after all images have been either loaded or confirmed broken.');
              // end the progress/loading animation here for all images or do
              // it individually in the progress event handler below
            });
            scope.imagesLoaded.on('done', function() {
              console.log('done event: Triggered after all images have successfully loaded without any broken images.');
            });
            scope.imagesLoaded.on('fail', function() {
              console.log('fail event: Triggered after all images have been loaded with at least one broken image.');
            });
            scope.imagesLoaded.on('progress', function(instance, image) {
              console.log('proress event: Triggered after each image has been loaded.', instance, image);
              // end the progress/loading animation here or do it for all images in the always
              // event handler above
            });

        }
    };
});

在AngularJS中使用＆＃34; ImagesLoaded＆＃34; -Plugin on事件

1 个答案: