快速删除内容（演示）

我们要确保所有图像都已加载，因此让我们为此编写一个指令：

app.directive('loadDispatcher', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                scope.$emit('$imageLoaded');
            });
        }
    };
})

…并将其附加到ng-src‘d元素：

<img class="thumb-recipe" ng-src="{{ object.tile_url }}" load-dispatcher/>

现在，我们可以比较模型捕获的事件数量，并根据需要进行操作：

var loadCount = 0;
scope.$on('$imageLoaded', function () {
    if (loadCount++ === scope.videos.objects.length - 1) {
        _initSlider(); // act!
    }
});

解耦（演示）

这有点令人不安，因为它不遵守Demeter律
-任何监视$imageLoaded事件的指令都必须知道模型（scope.videos.objects.length）。

我们可以通过查找加载多少图像而无需显式寻址模型来防止这种耦合。假设事件将在中处理ng-repeat。

1. 确保ng-repeat已完成，并使用项目计数触发事件。我们可以通过附加一个控制器来实现此目的，即仅监视$last财产。一旦找到它（具有真实值），我们将触发一个事件来通知它：

        .controller('LoopWatchCtrl', function($scope) {
        $scope.$watch('$last', function(newVal, oldVal) {
            newVal && $scope.$emit('$repeatFinished', $scope.$index);
        });
    })


        <div ng-repeat="object in videos.objects" ng-controller="LoopWatchCtrl">

1. 现在，捕获事件并相应地激活滑块初始化：

        var loadCount = 0,
        lastIndex = 0;

    scope.$on('$repeatFinished', function(event, data) {
        lastIndex = data;
    });

    scope.$on('$imageLoaded', function() {
        if (lastIndex && loadCount++ === lastIndex) {
            _initSlider(element); // this is defined where-ever
        }
    });

在那里，现在我们的指令不必了解模型。但是，这有点麻烦，现在我们必须将指令 和 控制器绑定在一起。

折叠（演示）

让我们将整个shabang提取到一个指令中：

    app.directive('imageLoadWatcher', function($rootScope) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                if (typeof $rootScope.loadCounter === 'undefined') {
                    $rootScope.loadCounter = 0;
                }
                element.find('img').bind('load', function() {
                    scope.$emit('$imageLoaded', $rootScope.loadCounter++);
                });
            },
            controller: function($scope) {
                $scope.$parent.$on('$imageLoaded', function(event, data) {
                    if ($scope.$last && $scope.$index === $rootScope.loadCounter - 1) {
                        $scope.$emit('$allImagesLoaded');
                        delete $rootScope.loadCounter;
                    }
                });
            }
        };
    });

…将应用于ng-repeated元素：

    <div ng-repeat="object in videos.objects" class="slide" image-load-watcher>

现在我们可以简单地$allImagesLoaded在滑块中观看例如：

    scope.$on('$allImagesLoaded', function() {
        _initSlider(element);
    });

将其概括（如果需要）（演示）

我们可以再次对其进行分解，并在整个应用程序中应用此方法，以对 任何 ng-repeat完成或ng-src负载使用事件分发，这并非总是必要的（
1 ），但可能非常有用。让我们看看如何：

1. 装饰ng-src指令，以便在加载图像时发送事件：

        app.config(function($provide) {
        $provide.decorator('ngSrcDirective', function($delegate) {
            var directive = $delegate[0],
                link = directive.link;
            directive.compile = function() {
                return function(scope, element, attrs) {
                    link.apply(this, arguments);
                    element.bind('load', function() {
                        scope.$emit('$imageLoaded');
                    });
                };
            };

            return $delegate;
        });
        // ...
    });

1. 装饰ng-repeat完成时通知：

        app.config(function($provide) {
        // ...
        $provide.decorator('ngRepeatDirective', function($delegate) {
            var directive = $delegate[0],
                link = directive.link;
            directive.compile = function() {
                return function(scope, element, attrs) {
                    link.apply(this, arguments);
                    scope.$watch('$$childTail.$last', function(newVal, oldVal) {
                        newVal && scope.$emit('$repeatFinished');
                    });
                };
            };

            return $delegate;
        });
    });

1. 现在可以在任何地方捕获事件，例如在您的滑块指令中：

        var repeatFinished = false;
    var loadCount = 0;

    scope.$on('$repeatFinished', function() {
        repeatFinished = true;
    });

    scope.$on('$imageLoaded', function () {
        if (repeatFinished && 
                    loadCount++ === scope.videos.objects.length - 1) {
            _initSlider(); // this is defined where-ever
        }
    });

当我们回到第一个问题时，这似乎无法达到目的，但它可能非常强大。还有-看，妈妈，没有新指令！

    <div ng-repeat="object in videos.objects" class="slide">
        <img class="thumb-recipe" ng-src="{{ object.tile_url }}"/>
    </div>

（演示）

TL;DR, just gimme tha demo!!!

1 。必须仔细考虑修饰，因为结果将在整个应用程序中加载的每个图像上发送一个事件。

• 从link1.3.x版开始，将无法覆盖该功能。