Question

我找到了许多关于如何检测最后一项是否显示在重复指令中的答案。

我使用了指令方法，将事件链接到所有重复的元素并观察$scope.$last以查看是否已经显示，然后我广播一个事件，并在控制器中捕获它，我在那里使用ImageLoaded查看图片是否已加载，并点燃isotope.layout()但图片仍然与其他元素重叠，我无法弄清楚如何避免这种情况。

在角度ng-repeat指令中触发同位素的最佳方法是什么？

//修改

这是一个例子：http://goo.gl/ZpCV8Q，如果你稍微改变一些类别，你可以看到它分崩离析：（（（

这是我认为的

<div id="clasificados" class="clasificados container-fluid">
    <div class="col-lg-2"></div>
    <div ng-repeat="clasificado in clasificados.clasificados | offset: clasificados.getOffset() | limitTo: 80 track by clasificado.id" ng-class="clasificados.bootstrapClass(clasificado)" on-finish-render="on-finish-render" ng-cloak="" class="ng-cloak clasificado">
    <div ng-if="clasificados.conArte(clasificado)"><img width="100%" src="http://cdn5.diarioepoca.com/{{clasificado.imageJob.pathConvertido}}" ng-show="clasificado.imageJob.pathConvertido"/><img width="100%" src="http://cdn5.diarioepoca.com/ClasificadosPNG/app/1.png" ng-hide="clasificado.imageJob.pathConvertido"/></div>
    <div ng-if="!clasificados.conArte(clasificado)" ng-bind-html="clasificado.TextoHTML"></div>
    <div class="codigoclcontainer"><small class="codigocl">{{ clasificado.CodigoAviso }}</small></div>
</div>

这是在我的控制器中可能有些东西似乎不合逻辑和丑陋，但在绝望中我已经修改了所有这个控制器......

angular.module('app').controller('claClasificadosCtrl', function($scope, $http, $timeout) {
    this.clasificados = [];
    $scope.loading = true;

    claClasificados.getClasificados()
        .then(function (data) {
            return claFilter.filtrar(data.data);
        })
        .then(function(clasif) {
            this.clasificados = clasif;//data;
            claPaginator.refresh(this.clasificados.length);
        }.bind(this));

    $scope.$on('ngRepeatFinished', function() {
        this.IL = imagesLoaded($('.clasificados'));
        this.IL.on('always', function() {
            $scope.$apply(function() {
                this.iso = new Isotope('.clasificados', {
                    itemSelector: '.clasificado'
                });
                this.iso.layout();
                $scope.loading = false;
            }.bind(this));
        });
    });

    this.conArte = function (clas){
        return _.indexOf([27, 31, 32, 35], clas.tipoDeClasificado.CodigoTipo) >= 0
    };
});

这是我的指示通知最后一个项目何时在屏幕上

angular.module('app').directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
             scope.$watch('$last', function(v) {
                if (v) {
                    $timeout(function() {
                        //console.clear();
                        scope.$emit('ngRepeatFinished');
                    });
                }
            }, true);
        }
    }
});

NgRepeat和Isotope无法检测是否加载了图像

0 个答案: