Как сделать что-нибудь

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> элемент для того, чтобы измерить его и установить соответствующий 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);
      });
    }
  }
});

Пример плункера: http://plnkr.co/edit/Zv9Q6AuNGfzeN2gs7q2f?p=preview

Надеюсь это поможет.