Je suis en train d'élaborer une "galerie d'art" app.
Hésitez pas à tirer vers le bas la source sur github et de jouer avec elle.
Plunker avec la totalité du code source.
Les travaux en cours autour de l'obtention de Maçonnerie à jouer gentil avec Angulaires:
.directive("masonry", function($parse) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
elem.masonry({ itemSelector: '.masonry-brick'});
}
};
})
.directive('masonryBrick', function ($compile) {
return {
restrict: 'AC',
link: function (scope, elem, attrs) {
scope.$watch('$index',function(v){
elem.imagesLoaded(function () {
elem.parents('.masonry').masonry('reload');
});
});
}
};
});
Cela ne fonctionne pas bien parce que:
- Comme le contenu grandit, la surcharge de tiggering recharger sur l'ensemble du conteneur.
L' reload fonction de:
- Ne pas "ajouterdes éléments", plutôt ré-organise chaque élément dans le conteneur.
- N' travail pour le déclenchement d'un rechargement lorsque les articles sont filtrés par un jeu de résultats.
Dans le contexte de l'application que je vous ai donné les liens ci-dessus, ce problème devient très facile à reproduire.
Je suis à la recherche d'une solution qui vous permettra d'utiliser les directives à l'effet de levier:
.masonry('appended', elem) et .masonry('prepended', elem)
Plutôt que de l'exécuter .masonry('reload') à chaque fois.
.masonry('reload') lorsque les éléments sont supprimés de jeu de résultats.
MODIFIER
Le projet a été mis à jour pour utiliser la solution de travail ci-dessous.
Prenez les sources sur GitHub
Voir une version de travail sur Plunker
