Javascript 为什么ngDirective`template`允许正确的`clientHeight`但`templateUrl`给出0

TL/DR

全部

我有一个演示我所说的。我正在使用一个名为dagreD3的d3库。它使用以下代码在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"
  };
});

现在我遇到的问题是当我运行以下代码时

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"
  };
});

然后正确呈现HTML，但外部对象的宽度和高度为0

是什么解释了这一点（假设是在消化周期中），我有没有办法绕过这个限制

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

---

？

看来我是对的，这很有意思，但似乎

$templateCache.put（'test.html'，'{{name}'）；
...
模板：$templateCache.get（“test.html”），

然后它就起作用了。这个解决方案是可以接受的，因为我已经在使用HTML2JS将这些项目加载到缓存中

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

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

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