不使用ng-if加载ng-repeat内的指令

I'm creating a Masonry layout populated with images and videos and since the images-loaded directive doesn't work I'm trying to come up with a quick work around. (https://github.com/passy/angular-masonry/issues/116)

我正在创建一个填充了图像和视频的砌体布局，因为加载图像的指令不起作用我正试图想出一个快速的解决方法。（https://github.com/passy/angular-masonry/issues/116）

The problem I have is the link function is never fires. I'm wondering if it has something to do with ng-if's being encapsulated by an ng-repeat because according to this plunkr (http://jsfiddle.net/q05gret0/) the link function should run whenever ng-if evaluates to true

我遇到的问题是链接功能永远不会触发。我想知道它是否与ng-if由ng-repeat封装有关，因为根据这个plunkr（http://jsfiddle.net/q05gret0/）链接函数应该在ng-if评估为true时运行

<div style="margin:auto;" images-loaded="false"
     masonry="{isFitWidth: true}">
    <div class="masonry-brick media-block"
         ng-repeat="mediaItem in media">
        <div ng-if="mediaItem.type === 'image/jpeg' || mediaItem.type === 'image/png'">
            <img alt="image" class="fill-width" ng-src="{{MEDIA_URL + mediaItem.urlThumbnail}}" data-loaded>
        </div>

        <div ng-if="mediaItem.type === 'video/mp4'">
            <video autoplay="true" loop="loop" muted="muted" data-loaded>
                <div trust-url url="mediaItem.url"></div>
            </video>
        </div>

        <div class="media-info container-fluid">
            <div class="col-xs-9 no-padding">
                <h5 class="media-title">{{mediaItem.name}}</h5>
            </div>
            <div class="col-xs-3 no-padding">
                <button class="btn btn-sm btn-danger" ng-click="deleteMedia(mediaItem)"><i
                        class="fa fa-trash-o"></i></button>
            </div>
        </div>
    </div>
</div>

And the directive in question:

并且有问题的指令：

.directive('dataLoaded', function dataLoaded() {
    return {
        restrict: 'A',
        link: function (scope, iElement) {
            console.log("linked!");

            iElement.bind('load', function() {
                scope.$broadcast("masonry.reload");
            });
        },
    };
})

2 个解决方案

#1

You are using the wrong directive name

您使用了错误的指令名称

<video autoplay="true" loop="loop" muted="muted" data-loaded>

"data-loaded" looks for a directive with a name "loaded". So you need rename directive to "loaded" or to change the attribute to "data-data-loaded". I'd prefer to rename the directive

“data-loaded”查找名为“loaded”的指令。因此，您需要将rename指令重命名为“loaded”或将属性更改为“data-data-loaded”。我更喜欢重命名该指令

#2

Please replace this line:

请替换此行：

.directive('dataLoaded', function dataLoaded() {

with that line:

用那条线：

.directive('loaded', function dataLoaded() {

#1