Hoje eu enfrento o problema de blocos sobrepostos após a diretiva ng-repeat. Aqui, o código que leva à sobreposição.
<div class="main__results--instagram" ng-show="showInstagram">
<div ng-repeat="searchResult in searchResults.instagram" class="item item--instagram--{{ searchResult.imageType }}" ng-gate8-masonry>
<img ng-src="{{ searchResult.image }}">
</div>
</div>
Uma solução simples que me ocorreu foi escrever minha própria diretiva ( ng-gate8-masonry ).
Esta diretiva é muito fácil:
(function() {
"use strict";
angular.module('masonry', ['ng']).directive('ngGate8Masonry', function($timeout) {
return function(scope, element, attrs) {
if (scope.$last){
$timeout(function () {
var parent = element.parent();
var masonry = new Masonry(parent[0], {
itemSelector: '.item',
isAnimated: true,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
transitionDuration : "0.4s",
isResizable: false
});
});
}
};
})
})();
Depois de encontrar o último elemento no loop de repetição de ng, o ngGate8Masonry entra em seu contêiner pai de elemento com a alvenaria.
$ timeout nos ajuda a superar o efeito da sobreposição.
PS
Parâmetros de diretório TODO para inicialização de objeto de Maçonaria.