Как подружить 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 картина получается той же. |
Проблема решена. Оказался конфликт css. В моем css и css JG были классы с одинаковыми именами (.spinner). Вот из-за них и была проблема. А при изменении размера окна спиннер JG не запускался, поэтому все пересчитывалось нормально.
|
![]() |
Часовой пояс GMT +3, время: 12:23. |