我为什么要使用不，如果我想我的指令重复DOM链接克隆DOM [英] why should I use cloned DOM that is not linked if I want my directive to repeat DOM

问题描述

我在读约transclusion这篇文章，这里是摘录自：

  

所以，如果我们的指令应该只是复制某些元素几次
  它可能是这样的：

 链接：功能（范围，元素，ATTRS，CTRL $ transcludeFn）{
    变种数= Math.abs（parseInt函数（attrs.simpleRepeat，10）|| 0）;
    而（count--）{
        $ transcludeFn（范围，功能（克隆）{
            //可以确保元件插入
            //到HTML链接前
            element.after（克隆）;
        }）;
    }
}
 

我困惑的code这里面评论：

  

//确保元素插入结果
    //到HTML链接前

你们能否请您解释我的链接，而不是做这样的前插入元素的需要？

 而（count--）{
    VAR克隆= $ transcludeFn（范围，功能（克隆）{}）;
    element.after（克隆）;
}
 

解决方案

让我们假设你是transcluding元素与指令富。 富不和的不应该的了解它是否transcluded或直接放置在那里它属于。

例如，富可能需要在其链接事件处理程序连接到其容器函数，或者可能要求：^ fooParent指令。对于后者例如，假设下面的使用富：

 ＆LT;富亲＆GT;
  ＆LT;富＆GT;＆LT; / foo的＆GT;
  ＆LT;富＆GT;＆LT; / foo的＆GT;
＆LT; / foo的父母和GT;
 

一切都应该工作的优良富。

但现在，我想获得幻想，所以我创建翻一番transcluded含量双击指令：

 ＆LT;富亲＆GT;
  ＆LT;双＆GT;
    ＆LT;富＆GT;＆LT; / foo的＆GT;
  ＆LT; /双＆GT;
＆LT; / foo的父母和GT;
 

和这里是其实现的一部分：

  transclude：真实，
链接：功能（范围，元素，ATTRS，ctrls监视，transclude）{
  VAR linkedClone1 = transclude（范围，功能（克隆）{
     element.append（克隆）; //工作正常
  }）;  VAR linkedClone2 = transclude（范围，功能（克隆）{}）;
  //追加之前失败，因为所需的富父母没有找到
  element.append（linkedClone2）;
}
 

这第二个 transclude 调用将失败富，因为富的链接阶段将之前运行克隆富追加到它的父。

I'm reading this article about transclusion and here is an extract from it:

So if our directive should just duplicate some element several times it could look like this:

link: function (scope, element, attrs, ctrl, $transcludeFn) {
    var count = Math.abs(parseInt(attrs.simpleRepeat, 10) || 0);
    while (count--) {
        $transcludeFn(scope, function (clone) {
            // be sure elements are inserted
            // into html before linking
            element.after(clone);
        });
    }
}

I am confused about this comment inside the code:

// be sure elements are inserted
// into html before linking

Can you guys please explain me the need for inserting the elements before linking instead of doing like this?

while (count--) {
    var clone = $transcludeFn(scope, function (clone) {});
    element.after(clone);
}

解决方案

Let's suppose that you are transcluding an element with a directive foo. foo doesn't and shouldn't know about whether it was transcluded or was placed directly where it belonged.

For example, foo might need to attach an event handler to its container in its link function, or it might require: "^fooParent" directive. For the latter example, imagine the following usage of foo:

<foo-parent>
  <foo></foo>
  <foo></foo>
</foo-parent>

Everything should work fine for foo.

But now, I want to get fancy and so I create a double directive that doubles its transcluded content:

<foo-parent>
  <double>
    <foo></foo>
  </double>
</foo-parent>

and here's part of its implementation:

transclude: true,
link: function(scope, element, attrs, ctrls, transclude){
  var linkedClone1 = transclude(scope, function(clone){
     element.append(clone); // works fine
  });

  var linkedClone2 = transclude(scope, function(clone){});
  // fails before append, because required foo-parent is not found
  element.append(linkedClone2);
}

This second transclude invocation will fail for foo, because foo's link phase will run before the cloned foo is appended to its parent.

这篇关于我为什么要使用不，如果我想我的指令重复DOM链接克隆DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！