Блог

Я нашел много ответов о том, как определить, отображается ли последний элемент в директиве repeat.

Я использовал директивный подход, связывая событие со всеми повторяющимися элементами и наблюдая, $scope.$last отображается ли оно уже, затем я транслирую событие и фиксирую его в контроллере, там я использую ImageLoaded , чтобы увидеть, загружены ли изображения, и запускаю isotope.layout() , но изображения по-прежнему накладываются на другие элементы, я не могу понять, как этого избежать.

каков наилучший способ запустить Isotope в директиве angular 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);
        }
    }
});