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
Post a Comment