angularjs – 你对转录函数和克隆链接函数做了什么？

正如@Jonah在下面指出的，here is a really good article on the compile option of directives and using the transclusion function

基本思想是编译函数应该返回一个链接函数。您可以使用链接函数中提供的互斥函数获取转录的DOM元素的克隆，编译它，并将其插入到需要插入的位置。

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

编译函数的想法是它给你一个机会，在创建和调用链接函数之前，基于传递的属性，以编程方式改变DOM元素。

// 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);
          }
        });
      };
    }
  };
});