相关部分如下：
function([scope],cloneLinkingFn,futureParentElement)
其中(第212行)：
futureParentElement: defines the parent to which thecloneLinkingFnwill add the cloned elements.
default:
$element.parent()resp.$elementfortransclude:'element'resp.transclude:true.only needed for transcludes that are allowed to contain non html elements (e.g. SVG elements)
and when thecloneLinkinFnis passed,
as those elements need to created and cloned in a special way when they are defined outside their usual containers (e.g. like<svg>).See also the
directive.templateNamespaceproperty.
然而,我没有看到futureParentElement的意义.它说
defines the parent to which the cloneLinkingFn will add the cloned elements.
但你在cloneLinkingFn本身就是这样做的：
transclude(scope,function (clone) {
some_element.append(clone);
});
如果不首先定义克隆功能,则无法使用transclude函数.
futureParentElement的正确用法/用途是什么？
解决方法
compile.js可以找到答案：添加futureParentElement的提交是
https://github.com/angular/angular.js/commit/ffbd276d6def6ff35bfdb30553346e985f4a0de6
在提交中有一个测试指令svgCustomTranscludeContainer的测试
directive('svgCustomTranscludeContainer',function() {
return {
template: '<svg width="400" height="400"></svg>',transclude: true,link: function(scope,element,attr,ctrls,$transclude) {
var futureParent = element.children().eq(0);
$transclude(function(clone) {
futureParent.append(clone);
},futureParent);
}
};
});
通过测试如何编译html< svg-custom-transclude-container>< circle cx =“2”cy =“2”r =“1”>< / circle>表现：
it('should handle directives with templates that manually add the transclude further down',inject(function() {
element = jqLite('<div><svg-custom-transclude-container>' +
'<circle cx="2" cy="2" r="1"></circle></svg-custom-transclude-container>' +
'</div>');
$compile(element.contents())($rootScope);
document.body.appendChild(element[0]);
var circle = element.find('circle');
assertIsValidSvgCircle(circle[0]);
}));
因此,如果您正在创建一个带有指令的SVG图像,它的模板将转换的SVG内容包装在< svg>中. …< / svg>标签,如果你没有将正确的futureParentElement传递给$transclude,那么SVG图像将无效(通过某种定义).
试图看看它实际上意味着什么是无效的,除了源代码中的测试之外,我根据单元测试中的指令创建了2个指令,并使用它们尝试创建带有部分圆的SVG图像.一个使用futureParentElement：
<div><svg-custom-transclude-container-with-future><circle cx="1" cy="2" r="20"></circle></svg-custom-transclude-container></div>
和一个相同但不相同的：
<div><svg-custom-transclude-container-without-future><circle cx="2" cy="2" r="20"></circle></svg-custom-transclude-container></div>
从http://plnkr.co/edit/meRZylSgNWXhBVqP1Pa7?p=preview可以看出,具有futureParentElement的那个显示了部分圆,而没有显示部分圆的那个显示了部分圆. DOM的结构看起来完全相同.但是,Chrome似乎报告第二个圆圈元素不是SVG节点,而是纯HTML节点.
因此,无论futureParentElement实际上做了什么,它似乎确保被转换的SVG内容最终被浏览器作为SVG处理.
