javascript - AngularJS : transclude を使用してディレクティブに関連付けられた要素を変更します

Question

への呼び出しに関連付けられた要素を変更するにはどうすればよいtransclude()ですか?

私のアプリでは、サーバーから SVG ファイル全体を動的にロードして表示します。読み込まれたコンテンツに動作を追加する必要があります。

現在、私は次のようなものを持っています：

<div svg-canvas="urlToSVGContent"></div>

これにより、div 内に SVG タグが読み込まれます。<path>これはうまく機能しますが、 、 などに ng-click を追加したい場合はどうすればよい<circle>ですか? ng-click箱から出してすぐに svg パスで既に動作します。それは、何らかの方法で要素を参照するだけの問題です。

Transclude を使用して、パスごとに 1 回実行されるディレクティブを既に作成できます。

<div svg-canvas="urlToSVGContent">
    <svg-each-path>
        <!-- call transclude once per path found -->
    </svg-each-path>
</div>

しかし、svg-each-path 内では、要素ごとに個別のスコープを持っていelますが、ディレクティブへのパラメーターは無意味です。または、まだ親divなどを指しています。

私はこれをしたいと思います：

<div svg-canvas="urlToSVGContent">
    <svg-each-path ng-click="onPathClick()">
    </svg-each-path>
</div>

svg-each-path現在の様子は次のとおりです。

function svgEachPath() {
    return {
        restrict: 'E',
        transclude: 'element',
        priority: 1000,
        terminal: true,
        link: link,
    }    

    function link(scope, el, attrs, ctrl, $transclude) {
        // scope.paths was set by the svg-canvas directive
        scope.paths.forEach(function(path) {
            var childScope = <InnerScope> scope.$new()
            childScope.path = path

            // how can I change "el" to point to path?
            // or get the clone to be a clone of the path instead of the parent element?
            $transclude(childScope, function(clone) {

            })
        })
    }
}