你到底用 transclude 函数和 clone 链接函数做什么? [英] What exactly do you do with the transclude function and the clone linking function?

问题描述

从指令Angular docs，我看到编译函数有3个参数，其中之一是transclude.文档提供的唯一解释是:

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 - 一个 transclude 链接函数:function(scope, cloneLinkingFn).

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

我试图了解您在克隆链接功能中究竟会做什么.我什至不知道传入了哪些参数.我发现了一个示例，其中有一个名为 clone 的参数，它似乎是一个 HTML 元素.还有其他参数可用吗?这究竟是哪个 HTML 元素?我也在考虑在我的指令中使用 transclude: 'element' .当使用 'element' 而不是 true 时，这些问题的答案会改变吗?

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?

我理解简单示例的嵌入，但我似乎无法找到更复杂的示例，尤其是使用 transclude: 'element'.我希望有人可以对这一切提供更彻底的解释.谢谢.

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.

推荐答案

完全彻底地改变了我的答案并将其标记为社区 Wiki"(对我来说没有任何意义)，因为我完全错了回答这个

正如@Jonah 在下面指出的，这是一篇关于指令的编译选项和使用嵌入函数的非常好的文章

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

基本思想是编译函数应该返回一个链接函数.您可以使用链接函数中提供的嵌入函数来获取嵌入的 DOM 元素的克隆，编译它，然后将其插入到需要插入的任何位置.

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.

这里有一个更好的例子，我已经从我对 Plunker 的了解中提取出来

compile 函数的想法是让您有机会根据在创建和调用链接函数之前传递的属性以编程方式更改 DOM 元素.

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 function 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 函数和 clone 链接函数做什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！