0

TL/DR

笨蛋

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

但

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

满的

我有一个plunker可以演示我在说什么。我正在使用一个名为 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"
  };
});

那么如果我在指令中有这个......

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

一切看起来都很棒，但是当我将 HTML 移出到外部文件并像这样导入时......

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

然后 HTML 被正确渲染，但外来对象的宽度和高度为 0。

是什么解释了这一点（假设它与摘要周期有关），有没有办法解决这个限制？

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

?

4

1 回答 1

0

显然我是对的，这很hacky，但似乎可以解决它...

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

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

于 2016-01-27T16:43:11.107 回答