Question

在angular documentation for the compile service (starting at line 412)中，有一个传递给指令的链接函数的transclude函数的描述。

相关部分内容如下：

function([scope], cloneLinkingFn, futureParentElement)

其中（第212行）：

futureParentElement：定义cloneLinkingFn将添加克隆元素的父级。



默认值：$element.parent() resp。 $element代表transclude:'element'。 transclude:true。



仅允许包含非html元素的转码（例如SVG元素）   当cloneLinkinFn通过时，   因为这些元素需要在它们通常的容器之外定义时以特殊方式创建和克隆（例如<svg>）。



另请参阅directive.templateNamespace属性。

然而，我没有看到futureParentElement的观点。它说

定义cloneLinkingFn将添加克隆元素的父级。

但你在cloneLinkingFn本身就是这样做的：

transclude(scope, function (clone) {
    some_element.append(clone);
});

如果不首先定义克隆功能，就不能使用transclude功能。

futureParentElement的正确使用/用途是什么？

Answer 1

通过查看git blame of 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内容包装起来，那么这个SVG图像不会有效（通过某种定义），如果你请勿将正确的futureParentElement传递给$transclude。

试图看看它实际上意味着什么是无效的，除了源代码中的测试之外，我根据单元测试中的指令创建了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的那个显示了部分圆，而没有不显示的是圆。{p}}。 DOM的结构看起来完全相同。但是，Chrome似乎报告第二个circle元素不是SVG节点，而是纯HTML节点。

因此无论futureParentElement实际上做了什么，它似乎确保被转换的SVG内容最终被浏览器作为SVG处理。

在指令链接函数的transclude函数中，如何使用“futureParentElement”？

1 个答案: