Question

我将SVG元素转换为另一个SVG指令。以下是名为＆＃34; component＆＃34;：

的父指令的模板

<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>元素的引用，以便对其进行衡量并设置相应的rectWidth和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);
      });
    }
  }
});

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

希望这有帮助。

如何转录任何东西

1 个答案: