Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 картина получается той же.
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2016, 22:23
Новичок на форуме
Отправить личное сообщение для To_wave Посмотреть профиль Найти все сообщения от To_wave
 
Регистрация: 15.09.2010
Сообщений: 7

Проблема решена. Оказался конфликт css. В моем css и css JG были классы с одинаковыми именами (.spinner). Вот из-за них и была проблема. А при изменении размера окна спиннер JG не запускался, поэтому все пересчитывалось нормально.
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2016, 14:44
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плагин jQuery - как сгенерить событие? maxapet jQuery 1 31.08.2015 09:44
Как можно отправить данные с одного сайта на другой с jQuery grigori59 AJAX и COMET 5 21.12.2012 17:25
Как подключить JQUery при разработке расширения для OPERA? Romingood jQuery 1 24.10.2012 11:25
Как сделать плагин jQuery в виде объекта? SkaN jQuery 12 28.06.2012 12:31
Как задать условие в jquery чтобы он проводил линию.. voloxa89 Элементы интерфейса 7 17.08.2011 10:00