Question

我的一个页面需要加载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中。我只想分别为每个路径添加指令。

是否可以使用transclusion将集合中的对象（形状）链接到子范围，以便我可以使用它？没有把它放在DOM中？怎么样？

Answer 1

您需要做的就是在父级中设置transclude: true，并为每个子级调用一次transclude函数，并在作用域上设置适当的属性，以便子指令可以使用。

这是一个简化的例子：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
                 })
             })
         }

    }
})

以下是一个内部指令的示例：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>

AngularJS指令：使用transclude / compile链接集合中的对象

1 个答案: