Que fais-tu exactement avec la transclude fonction et le clone de la fonction de liaison?

Question

De la directive Angulaire docs, je vois la compilation en fonction de 3 paramètres, dont l'un est - transclude. La seule explication que les docs à fournir sont:

transclude - Un transclude fonction de liaison: function(champ d'application, cloneLinkingFn).

Je suis en train d'essayer de comprendre exactement ce que vous feriez dans le clone de la fonction de liaison. Je ne sais même pas quels sont les paramètres qui se passait en elle. J'ai trouvé un exemple qui a un paramètre qui s'appelle clone qui semble être un élément HTML. Existe-il d'autres paramètres disponibles? Qui de l'élément HTML est-ce exactement? Je suis également à la recherche d'vraisemblablement à l'aide d' transclude: 'element' dans mon directive. Les réponses à ces questions de changement lors de l'utilisation d' 'element' au lieu de true?

Je suis à la compréhension de la transclusion avec des exemples simples, mais je ne peux pas l'impression de trouver des exemples plus complexes, en particulier avec transclude: 'element'. J'espère que quelqu'un peut fournir une explication plus approfondie à propos de tout cela. Merci.

Answer 1

EDIT: Complètement et totalement changer ma réponse et le marquage ce "Wiki de la Communauté" (ce qui signifie pas de points pour moi) que j'ai été totalement incorrect lorsque j'ai répondu à cette

@Jonas l'a souligné ci-dessous, voici un très bon article sur l'option de compilation des directives et de l'aide de la fonction transclusion

L'idée de base est la compilation de la fonction doit retourner une fonction de liaison. Vous pouvez utiliser la transclusion fonction à l'intérieur de la fonction de liaison de prendre un clone de la transcluded élément du DOM, le compiler, et l'insérer là où elle doit être insérée.

Ici est un meilleur exemple que j'ai sorti de mon cul sur Plunker

L'idée de la compilation de la fonction est qu'il vous donne une chance de programmation pour modifier les éléments du DOM basée sur les attributs est écoulé AVANT que la fonction de liaison est créé et appelé.

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