0

SVG 要素を別の SVG ディレクティブに変換しています。「component」という親ディレクティブのテンプレートは次のとおりです。

<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>の測定サイズに応じて、テンプレートのサイズを変更したいと考えています。トランスクルージョンされた要素を測定して適切なandを設定するため<text>に、参照を取得するにはどうすればよいですか?<text>rectWidthrectHeight

4

1 に答える 1

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

お役に立てれば。

于 2014-08-02T19:31:37.477 に答える