Forked from rajaraodv/angularjsMasonryImagesLoaded1.js
Created
March 19, 2013 08:05
-
-
Save wgm89/5194421 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//This is how HTML, Controller & Directive looked in my actual app at this point. | |
//Notice that we are applying masonry for every element as they are added by ng-repeat. | |
//HTML | |
/* | |
<div id="photoContainer" style="position:relative;height:800px;zoom:1;"> | |
<div class="photo" ng-repeat="photoPost in photoPosts"> | |
<img ng-src="{{photoPost.photo.url}}" add-masonry="photoPost"></div> | |
</div> | |
</div> | |
*/ | |
//MainController gets photoPosts & initializes masonry. | |
function MainCtrl($scope, Project, BackendService) { | |
//this is asynchronous $scope.photoposts will be loaded at some later time | |
$scope.photoPosts = BackendService.query(); | |
$scope.container = $('#photoContainer'); | |
$scope.container.imagesLoaded(function() { | |
$scope.container.masonry({ | |
itemSelector: '.photo' | |
}); | |
}); | |
} | |
//directive.. reapply masonry when an item is loaded. | |
//Fails because our item contains images | |
clientAppModule.directive('addMasonry', function($timeout) { | |
return { | |
restrict: 'A', | |
link: function(scope, element) { | |
//reapply masonry | |
scope.container.masonry('reload'); | |
} | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment