Question

我正在创建一个填充了图像和视频的砌体布局，因为加载图像的指令不起作用我正试图想出一个快速的解决方法。（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");
            });
        },
    };
})

Answer 1

您使用了错误的指令名称

Second11ViewController

＆＃34;数据加载＆＃34;查找名称为＃34;加载＆＃34;的指令。所以你需要将命令重命名为＆＃34; loading＆＃34;或者将属性更改为＆＃34;数据数据加载＆＃34;。我更喜欢重命名指令

Answer 2

请替换此行：

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

用那一行：

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

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

2 个答案: