Как подружить 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, время: 21:00. |