angularjs - 如何嵌入任何东西

Question

我将一个 SVG 元素嵌入到另一个 SVG 指令中。这是名为“组件”的父指令的模板：

<svg xmlns="http://www.w3.org/2000/svg">

   <rect class="component-rect" width="{{rectWidth}}" height="{{rectHeight}}"></rect>

   <g ng-transclude></g>

</svg>

这是使用该指令的标记：

<g>
    <component ng-repeat="(id, component) in placedComponents">
        <text>{{component.label}}</text>
    </component>
</g>

我想根据嵌入元素<rect>的测量大小调整模板中的大小。<text>如何获得对嵌入<text>元素的引用以测量它并设置适当的rectWidthand rectHeight？

Answer 1

您可以删除ng-transclude模板中的 ，然后在链接功能中自己进行翻译，如下所示：

.directive('component', function () {
  return {
    restrict: 'E',
    templateUrl: 'component.html',
    transclude: true,
    link: function (scope, element, attrs, ctrls, transcludeFn) {
      scope.rectHeight = 100;
      scope.rectWidth = 100;

      transcludeFn(function (clones) {
        // clones are the transcluded elements
        element.find('g').append(clones);
      });
    }
  }
});

示例插件： http ://plnkr.co/edit/Zv9Q6AuNGfzeN2gs7q2f?p=preview

希望这可以帮助。