Simple angular and masonry directive without overlapping

Today I face the problem of overlapped blocks after ng-repeat directive. Here the code that leads to overlapping.

<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>

A simple solution that came to me was to write my own directive (ng-gate8-masonry).

This directive is pretty easy:

(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
 });
 });
 }
 };
 })
})();

After finding the last element in ng-repeat loop ngGate8Masonry inits element parent container with masonry.
$timeout helps us to overcome the effect of overlapping.

P.S.

TODO directory params for Masonry object init.

Related protips

Have a fresh tip? Share with Coderwall community!