你的transclude功能和链接克隆功能到底该怎么做？ [英] What exactly do you do with the transclude function and the clone linking function?

问题描述

从指令角文档，我看到了编译函数有三个参数，其中之一是 transclude 。该文档提供了唯一的解释是：

  

transclude - 一个transclude链接功能：功能（范围，cloneLinkingFn）

我想了解究竟是什么，你会在克隆链接功能做的。我甚至不知道获得通过什么参数进去。我发现一个例子有所谓的一个参数克隆这似乎是HTML元素。是否还有其他参数可用？其中HTML元素是这到底是什么？在我的指示元素：我也期待在可能使用 transclude。做这些问题的答案时使用更改元素而不是真正？

我理解的简单的例子transclusion，但我不能似乎找到更复杂的例子，尤其是 transclude：元素。我希望有人能够提供这一切的更详尽的解释。谢谢你。

解决方案

编辑：完全彻底的改变我的答案和标记这是社区维基（意为没有点我），因为我是完全错误的，当我回答了这个

正如@Jonah指出以下，<一href=\"http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/\">here是指令的编译选项，并使用transclusion功能一个真正的好文章

的基本思想是编译函数应返回的连接功能。您可以使用链接功能内侧的transclusion功能采取transcluded DOM元素的克隆，编译它，然后将其插入任何地方需要插入。

这里是一个更好的例子，我拿出我的Plunker

编译功能的想法是它给你一个机会，以编程方式改变的基础上通过属性的DOM元素之前创建的链接功能和调用。

//一个愚蠢的指令重复字典对象的项目。
app.directive（'keyValueRepeat'，函数（$编译）{
  返回{
    transclude：真实，
    范围： {
      数据：=，
      showDebug：'@'
    }，
    编译：功能（ELEM，ATTRS，transclude）{      如果（attrs.showDebug）{
        elem.append（'＆LT; D​​IV CLASS =调试＆GT;启用调试{{showDebug}}＆LT; / DIV＆GT;'）;
      }      返回功能（范围，lElem，lAttrs）{
        变种项= [];
        的console.log（lElem）;
        范围。$表（数据，功能（数据）{          //从跟踪数组中删除旧值
          // （见下文）
          为（变量I = items.length;我 - 大于0）{
            项目[I] .element.remove（）;
            。项目[I] .scope $ destroy（）方法;
            items.splice（I，1）;
          }          //添加新的
          对于（数据VAR键）{            VAR VAL =数据[关键]，
                childScope =范围。美元的新（）
                是childElement = angular.element（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;'）;            //在我们的中继器的每个项目，我们要创造它的
            //自己的范围，并在其上​​设置键和值的属性。
            childScope.key =键;
            childScope.value = VAL;            //做transclusion。
            transclude（childScope，功能（克隆，innerScope）{
              //克隆是transcluded DOM元素内容的副本。
              的console.log（克隆）;              //因为我们还是该指令的编译功能可按里面，
              //我们可以改变各输出项目的内容
              //根据传入的属性。
              如果（attrs.showDebug）{
                。克隆prePEND（'＆LT;跨度类=调试＆GT; {{键}} {{}值}＆LT; / SPAN＆GT;'）;
              }              //追加transcluded元素。
              childElement.append（$编译（克隆）（innerScope））;
            }）;            //添加到跟踪阵列制成的物体。
            //所以我们以后可以删除它们时，我们需要更新。
            items.push（{
              元素：元素childElement，
              适用范围：childScope
            }）;            lElem.append（是childElement）;
          }
        }）;
      };
    }
  };
}）;


From the directive Angular docs, I see the compile function has 3 parameters, one of which is transclude. The only explanation the docs provide is:

transclude - A transclude linking function: function(scope, cloneLinkingFn).

I'm trying to understand what exactly you would do in the clone linking function. I don't even know what parameters get passed into it. I found one example that has one parameter called clone that appears to be an HTML element. Are there other parameters available? Which HTML element is this exactly? I'm also looking at probably using transclude: 'element' in my directive. Do the answers to those questions change when using 'element' instead of true?

I'm understanding transclusion with the simple examples, but I can't to seem to find more complex examples, especially with transclude: 'element'. I'm hoping someone can provide a more thorough explanation about all this. Thanks.

解决方案

EDIT: Completely and totally changing my answer and marking this as "Community Wiki" (meaning no points for me) as I was outright wrong when I answered this

As @Jonah pointed out below, here is a really good article on the compile option of directives and using the transclusion function

The basic idea is the compile function should return a linking function. You can use the transclusion function provided inside the linking function to take a clone of the transcluded DOM element, compile it, and insert it wherever it needs to be inserted.

Here is a better example I've pulled out of my butt on Plunker

The idea of the compile function is it gives you a chance to programmatically alter the DOM elements based on attributes passed BEFORE the linking function is created and called.

// a silly directive to repeat the items of a dictionary object.
app.directive('keyValueRepeat', function ($compile){
  return {
    transclude: true,
    scope: {
      data: '=',
      showDebug: '@'
    },
    compile: function(elem, attrs, transclude) {

      if(attrs.showDebug) {                
        elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
      }

      return function(scope, lElem, lAttrs) {
        var items = [];
        console.log(lElem);
        scope.$watch('data', function(data) {

          // remove old values from the tracking array
          // (see below)
          for(var i = items.length; i-- > 0;) {
            items[i].element.remove();
            items[i].scope.$destroy();
            items.splice(i,1);
          }

          //add new ones
          for(var key in data) {

            var val = data[key],
                childScope = scope.$new(),
                childElement = angular.element('<div></div>');

            // for each item in our repeater, we're going to create it's
            // own scope and set the key and value properties on it.
            childScope.key = key;
            childScope.value = val;

            // do the transclusion.
            transclude(childScope, function(clone, innerScope) {
              //clone is a copy of the transcluded DOM element content.
              console.log(clone);

              // Because we're still inside the compile funciton of the directive,
              // we can alter the contents of each output item
              // based on an attribute passed.
              if(attrs.showDebug) {                
                clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
              }

              //append the transcluded element.
              childElement.append($compile(clone)(innerScope));
            });

            // add the objects made to a tracking array.
            // so we can remove them later when we need to update.
            items.push({
              element: childElement,
              scope: childScope
            });

            lElem.append(childElement);
          }
        });
      };
    }
  };
});

这篇关于你的transclude功能和链接克隆功能到底该怎么做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！