指令不使用 ng-if 在 ng-repeat 中加载答案

【问题标题】：Directive not loading inside ng-repeat with ng-if指令不使用 ng-if 在 ng-repeat 中加载
【发布时间】：2015-10-08 13:42:04
【问题描述】：

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

我遇到的问题是链接功能永远不会触发。我想知道它是否与 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>

还有相关指令：

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

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

【问题讨论】：

data 这个词是一个属性前缀。它不是指令名称的一部分。将 data 重命名为其他名称。

标签： angularjs masonry

【解决方案1】：

您使用了错误的指令名称

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

"data-loaded" 查找名称为 "loaded" 的指令。因此，您需要将指令重命名为“已加载”或将属性更改为“数据数据加载”。我宁愿重命名指令

【讨论】：

这是正确的答案。 Angualr 尊重 JavaScript 的 data- 属性，并且会处理任何带有“data-”前缀的指令。所以data-ng-model 有效，data-ng-if 也有效。

【解决方案2】：

请替换此行：

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

用那一行：

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

【讨论】：