Question

如何更改与transclude()？

的通话相关联的元素

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

目前，我有这样的事情：

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

这会在div中加载SVG标记。这很有用，但如果我想为每个<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) {

            })
        })
    }
}

Answer 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>

AngularJS：使用transclude更改与指令关联的元素

1 个答案: