0

如何更改与调用关联的元素transclude()？

在我的应用程序中，我从服务器动态加载整个 SVG 文件并显示它。我需要向加载的内容添加行为。

目前，我有这样的事情：

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

这会在 div 中加载一个 SVG 标签。这很好用，但是如果我想向 every <path>、<circle>等添加 ng-click 怎么办？ng-click已经在 svg 路径上开箱即用，这只是以某种方式引用元素的问题。

我已经可以使用 transclude 创建一个指令，该指令将为每个路径运行一次：

<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) {

            })
        })
    }
}
4

1 回答 1

1

我正在寻找$compile服务。它允许您获取任何 html 字符串或元素，并将其绑定到范围以运行指令。它根本不需要嵌入。

function svgEachPath($compile) {
    return {
        restrict: 'E',

        // should stop processing directives. we don't want ng-click to apply to the fake element
        terminal: true,
        priority: 1000,

        link: link,
    }    

    function link(scope, el, attrs) {
        scope.paths.forEach(function(path) {
            // copy in all my attributes to the element itself
            Object.keys(attrs)
            .filter((key) => key[0] != "$")
            .forEach((key) => {
                // use snake case name, not camel case
                path.attr(attrs.$attr[key], attrs[key])                
            })

            // "compile" the element - attaching directives, etc
            var link = $compile(path)
            link(scope)
        })
    }
}

用法：

<div svg-canvas="urlToSVGContent">
    <svg-each-path ng-click="onPathClick(...)">
    </svg-each-path>
</div>
于 2014-02-10T16:38:17.170 回答