Всем доброго.
Пытаюсь использовать 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 картина получается той же.
