0

私のページの 1 つは、SVG ファイルを読み込んで編集する必要があります。現時点では、SVG 全体と、形状に関連付けられたすべての相互作用の両方を処理する巨大なディレクティブです。形状の相互作用を別々のディレクティブに入れることができるように、それを分割したいと思います。

これが私が今していることです：

<svg-canvas 
    fills="fills"
    src="{{svgImageUrl}} 
    selected-shape="selectedShape"
    on-drop-fill="addFill(pathId, fill)"
/>

ディレクティブは、親 (SVG) とすべての子シェイプの相互作用の両方を管理しています。たとえば、すべての形状にクリック ハンドラーを追加し、スコープで選択した形状を更新します。塗りつぶしの変化を深く観察し、正しい形状を調べて適用します。

私はむしろこのようなことをしたい：

<svg-canvas src="{{svgImageUrl}}>
    <svg-each-shape as="shape" svg-click="selectShape(shape)" svg-fill="fills[shape.id]" on-drop-fill="addFill(shape, fill)"/>
</svg-canvas>

概念的には、svg-click、svg-fill などの個別のディレクティブを作成できる方がずっとすっきりしているように見えます。目を細めると、これは ng-repeat によく似ています。Ng-repeat を使用すると、コンテンツの相互作用を親から分離できます。大きな違いは、ディレクティブが DOM に入ることが想定されていないことです。各パスに個別にディレクティブを追加する方法が必要です。

トランスクルージョンを使用して、コレクション内のオブジェクト (シェイプ) を子スコープにリンクして、それを操作できるようにすることはできますか? DOMに入れずに？どのように？

4

1 に答える 1

2

あなたがする必要があるtransclude: trueのは、親に設定し、適切なプロパティをスコープに設定して子ごとに 1 回トランスクルード関数を呼び出して、子ディレクティブが何かを操作できるようにすることだけです。

簡単な例を次に示します: svgCanvas.js

.directive('svgCanvas', function() {
    return {
        restrict: 'AE', 
        transclude: true,
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, el, attrs) {
                return link(scope, el, attrs, transclude)
            }
        }
    }

    function link(scope, el, attrs, transclude) {
         // ... other code
         // after loaded 
         function afterLoaded() {
             el.find("rect, path").each(function() {
                 var childScope = scope.$new()
                 // child directives can read ._path to work their magic
                 childScope._path = $(this)
                 transclude(childScope, function(clone) {
                    // You don't have to do anything in here if you don't want
                    // transclude runs all child directives
                 })
             })
         }

    }
})

内部ディレクティブの 1 つの例を次に示します: svgClick.js

.directive('svgClick', function() {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            var $path = scope._path
            $path.click(function() {
                scope.$apply(function() {
                    scope.$eval(attrs.svgClick)
                })
            })
        }
    }
})

そして、これがあなたがそれをどのように使用するかです

<svg-canvas src="{{svgImageUrl}}">

    <svg-each-path
        svg-click="selectPath(path.id)" 
    />

</svg-canvas>
于 2013-11-12T17:11:36.380 に答える