angularjs – 在指令链接函数的transclude函数中,如何使用“futu

发布时间：2020-12-17 17:41:12 所属栏目：安全来源：网络整理

导读：在 angular documentation for the compile service (starting at line 412)中,有一个transclude函数的描述,该函数被传递到指令的链接函数中. 相关部分如下： function([scope],cloneLinkingFn,futureParentElement) 其中(第212行)： futureParentElement :

在 angular documentation for the compile service (starting at line 412)中,有一个transclude函数的描述,该函数被传递到指令的链接函数中.

相关部分如下：

function([scope],cloneLinkingFn,futureParentElement)

其中(第212行)：

futureParentElement: defines the parent to which the cloneLinkingFn will add the cloned elements.

default: $element.parent() resp. $element for transclude:'element' resp. transclude:true.

only needed for transcludes that are allowed to contain non html elements (e.g. SVG elements)
and when the cloneLinkinFn is 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.templateNamespace property.

然而,我没有看到futureParentElement的意义.它说

defines the parent to which the cloneLinkingFn will add the cloned elements.

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

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

如果不首先定义克隆功能,则无法使用transclude函数.

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

解决方法

通过查看 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>标签,如果你没有将正确的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处理.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!