Показать сообщение отдельно
  #1 (permalink)  
Старый 10.02.2016, 20:50
Новичок на форуме
Отправить личное сообщение для To_wave Посмотреть профиль Найти все сообщения от To_wave
 
Регистрация: 15.09.2010
Сообщений: 7

Как подружить AngularJS и jQuery Justified Gallery?
Всем доброго.
Пытаюсь использовать jQuery библиотеку Justified Gallery

В контроллере создаю массив ссылками на изображения. Далее по этому решению строю структуру.

В итоге получается такая картина:

Template
<div justified id="justified">
       <a ng-repeat="image in imagesInView track by $index" ng-href="#" repeat-done>
            <img ng-src="{{image}}"/>
        </a>
</div>


Repeat done directive
angular.module('myApp')
    .directive('repeatDone', [function() {
        return {
            restrict: 'A',
            link: function(scope, element, iAttrs) {
                var parentScope = element.parent().scope();
                if (scope.$last) {
                    parentScope.$last = true;
                }
            }
        };
    }]);


Justified directive
angular.module('myApp')
    .directive('justified', [
        function() {
            return {
                restrict: 'A',
                link: function(scope, el, attrs) {
                    scope.$watch('$last', function(n, o) {
                        if (n) {
                            angular.element("#justified").justifiedGallery({
                                rowHeight: 300
                            });
                        }
                    });
                }
            };
        }]);


Дальше начинается самое интересное.
После инициализации библиотеки рассчитываются размеры изображений, расставляются по сетке и сразу к контейнеру галереи (с id "justified") применятся height: 0px;
Стоит изменить размер окна, как размеры пересчитываются и к размеру контейнера применяется корректная высота.

Пробовал сделать хак на событие jg.complete. примерно в таком виде.

.on('jg.complete', function(){
//recalc для избежания вечного цикла
    if (!recalc) {
        angular.element("#justified").justifiedGallery('norewind');
        recalc = true
    }
});


С одной стороны хак решает проблему. Галерея показывается сразу, но невозможно динамически добавлять новые изображения по инфинит скролл.

Кстати, если отказаться от ng-repeat и скормить ему статичный template картина получается той же.
Ответить с цитированием