javascript - Why does ngDirective `template` allow for correct `clientHeight` but `templateUrl` gives 0 -

tl/dr

plunker

// foreign object right size template: "<h1>{{name}}</h1>", 

but

// foreign object size 0 why that? templateurl: "dialog.html", 

full

i have plunker demos talking about. using d3 library called dagred3. creates foreign object in svg using following code...

function addhtmllabel(root, node) {   var fo = root             .append("foreignobject")             .attr("width", "100000");    var div = fo     .append("xhtml:div");    var label = node.label;   switch(typeof label) {     case "function":       div.insert(label);       break;     case "object":       // assume dom object.       div.insert(function() { return label; });     break;       default: div.html(label);   }    util.applystyle(div, node.labelstyle);   div.style("display", "inline-block");   // fix firefox   div.style("white-space", "nowrap");    // important area   var w, h;   div     .each(function() {       w = this.clientwidth;       h = this.clientheight;     });    fo     .attr("width", w)     .attr("height", h);    return fo; } 

now problem having when run following code...

$scope.nodes = d3.range(20).map(function() {   // important area   var = math.floor(math.random() * types.length),       rand = types[i],       nscope = $rootscope.$new();   nscope.name = rand.label;   var element = angular.element('<jg-item name="name"></jg-item>');   $compile(element)(nscope);   // end area   return {     radius: math.random() * 36 + 10,     label: element[0],     labeltype: "html",     color: rand.color,     typeindex: i,     radius: 50,     shape: rand.shape ? rand.shape : "rect"   }; }); 

then if have in directive...

// works template: "<h1>{{name}}</h1>" 

everything looks great when move html out external file , import this...

// fails templateurl: "dialog.html", 

then html rendered foreign object has width , height of 0.

what explains (assuming digest cycle) , there way can around limitation?

template: $templatecache.get("...") 

?

apperently right hacky seems fix it...

$templatecache.put('test.html', '<h1>{{name}}</h1>'); ... template:$templatecache.get("test.html"), 

then works. solution acceptable because using html2js load these items cache.