angularjs - How do I get clientHeight of parent element when `ng-cloak` is active -


i have following in linker directive....

pre: function prelink($scope, e) {     var element = d3.select(e[0]);     var height = element.node().parentnode.clientheight;     element       .style({         "border": "7px solid black",         "min-height": height+"px",         "background-image" : "url('http://s3.amazonaws.com/dostuff-production/property_assets/23107/yellow-stripes.png')"       });       element.select(".board")                     .style("transform", function(d){                         var ch = d3.select(this).node().clientheight;                         return "translate("+0+"px, "+(height/2-ch/2)+"px)"                     }) } 

and in code have

<jg-body ng-cloak> 

the problem element.node().parentnode.clientheight; 0 ng-cloak. there way defer link function till after ng-cloak removed?

update

based on feedback tried this...

compile: function compile() {         return {             pre: function prelink($scope, e) {                 var element = d3.select(e[0]);                 $timeout(function() {                     var height = element.node().parentnode.clientheight;                     element                         .style({                             "border": "7px solid black",                             "min-height": height + "px",                             "background-image": "url('http://s3.amazonaws.com/dostuff-production/property_assets/23107/yellow-stripes.png')"                         });                     element.select(".board")                         .style("transform", function (d) {                             var ch = d3.select(this).node().clientheight;                             return "translate(" + 0 + "px, " + (height / 2 - ch / 2) + "px)"                         })                 })             }         }   } 

however, var height = element.node().parentnode.clientheight; still 0 , removing ng-cloak fixes it. created example plnker here

would $timeout or work?

yes , should. note checking height inside pre link runs before directive compiled. before compiled have no content

you should move code post link , use $timeout there depending on jg-body templating does. if relies on asynchronous data render , height have issue deal need more code shown sort out


Comments