Почему ngDirective `template` позволяют правильные` `clientHeight` но templateUrl` дает 0

Question

TL/DR

plunker

// Foreign object is the right size 
template: "<h1>{{name}}</h1>", 

но

// Foreign object is size 0 why is that? 
templateUrl: "dialog.html", 

ПОЛНЫЙ

У меня есть plunker, что демо, о чем я говорю. Я использую d3-библиотеку под названием dagreD3. Это создает посторонний предмет в SVG, используя следующий код ...

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": 
     // Currently we assume this is a DOM object. 
     div.insert(function() { return label; }); 
    break; 
     default: div.html(label); 
    } 

    util.applyStyle(div, node.labelStyle); 
    div.style("display", "inline-block"); 
    // Fix for 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; 
} 

Теперь проблема, которую я имею, когда я запускаю следующий код ...

$scope.nodes = d3.range(20).map(function() { 
    // IMPORTANT AREA 
    var i = 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" 
    }; 
}); 

Тогда, если у меня есть это в директиве ...

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

Все выглядит замечательно, но когда я перехожу HTML на внешний файл и импорта, как это ...

// This fails 
templateUrl: "dialog.html", 

Тогда HTML правильно оказанные, но посторонний предмет имеет ширину и высоту 0.

Что объясняет это (при условии, что с циклом дайджеста) и есть способ, которым я могу обойти это ограничение?

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

?

Answer 1

Apperently Я был прав, это Hacky, но, кажется fix it ...

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

Затем он работает. Это решение приемлемо, потому что я уже использую HTML2JS для загрузки этих элементов в кеш.