指令不在 ng-repeat 中加载 ng-if

Question

我正在创建一个填充有图像和视频的 Masonry 布局，由于图像加载指令不起作用，我正在尝试想出一个快速解决方法。 (https://github.com/passy/angular-masonry/issues/116)

我遇到的问题是 link 函数永远不会触发。我想知道它是否与 ng-if 被 ng-repeat 封装有关，因为根据这个 plunkr (http://jsfiddle.net/q05gret0/) 每当 ng-if 时，link 函数应该运行计算结果为 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>

有问题的指令：

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

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

Answer 1

请替换此行：

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

那一行：

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

Answer 2

您使用了错误的指令名称

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

"data-loaded" 查找名称为 "loaded" 的指令。因此，您需要将指令重命名为 "loaded" 或将属性更改为 "data-data-loaded"。我更愿意重命名指令

指令不在 ng-repeat 中加载 ng-if

Directive not loading inside ng-repeat with ng-if

angularjs

masonry