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