jquery - angular masonry directive with serverside data -

jquery - angular masonry directive with serverside data -

how apply masonry grid angular directive element created on server side , angular gets via ajax. when loads should check directive , apply masonries jquery

from masonry example

var container = document.queryselector('#container'); var msnry = new masonry( container, { // options... itemselector: '.item', columnwidth: 200 });

what try

angular.module('myapp') .directive('masonry', function($parse) { return{ restrict: "e", compile: function (element, attrs) { element.masonry({ itemselector: '.masonry-brick', columnwidth: 70 }); } } });

server side generated markup

<masonry> <div class="masonry-brick"> <a href="#"><img src="/path/to/image" /></a> </div> </masonry>

the point masonry directive markup generated directive looks follows

angular.module('myapp') .controller('slugctrl', function ($scope, wpapi, $compile, $filter, ngprogresslite, $timeout) { // content rendered. $scope.maincontent = []; //loading animate starts ngprogresslite.start(); loadremotedata(); // load remote info server. function loadremotedata() { // wpapiservice returns promise. wpapi.getcontents() .then( function( post ) { applyremotedata( post ); }); } // apply remote info local scope. function applyremotedata( newcontents ) { $scope.maincontent = $compile( newcontents[0].content )($scope); //$scope.maincontent = $compile( newcontents[0].content )($scope); //console.log($scope.maincontent); } //loading animate ends ngprogresslite.done(); }).directive('maincontent', function() { homecoming { restrict: 'a', scope: { maincontent: '=maincontent' }, link: function (scope, element, attrs) { scope.$watch('maincontent', function(val) { if(!val) { return; } element.append( val ); }); } }; })

thena trying next on sec directive fires on masonry layers won't rendered in popper way , on resize screen skips out

angular.module('myapp') .directive('masonry', function($parse) { return{ restrict: "e", compile: function (element, attrs) { var selector = element.parent('.gallery'); if(selector){ selector.masonry({ itemselector: '.masonry-brick', columnwidth: 70 }); console.log(selector); } else { alert(); } } } });

the problem seems related wrong calculation on parent container

checking dom style="position: relative; height: 22233px;" height quite big

add $scope.$digest() below $compile in applyremotedata:

function applyremotedata( newcontents ) { $scope.maincontent = $compile( newcontents[0].content )($scope); $scope.$digest() //$scope.maincontent = $compile( newcontents[0].content )($scope); //console.log($scope.maincontent); }

jquery angularjs angularjs-directive