Quels sont les avantages d'une directive fonction de modèle dans Angularjs?

La compilation de la fonction peut être utilisée pour modifier le DOM avant que les modèle de fonction est liée à la portée.

Considérons l'exemple suivant:

<div my-directive></div>

Vous pouvez utiliser la compilation de la fonction pour changer le modèle DOM comme ceci:

app.directive('myDirective', function(){
  return {

    //Compile function acts on template DOM
    //This happens before it is bound to the scope, so that is why no scope
    //is injected
    compile: function(tElem, tAttrs){

      //This will change the markup before it is passed to the link function
      //and the "another-directive" directive will also be processed by Angular
      tElem.append('<div another-directive></div>');

      //Link function acts on instance, not on template and is passed the scope
      //to generate a dynamic view
      return function(scope, iElem, iAttrs){

        //When trying to add the same markup here, Angular will no longer
        //process the "another-directive" directive since the compilation is
        //already done and we're merely linking with the scope here
        iElem.append('<div another-directive></div>');
      }
    }
  }
});

De sorte que vous pouvez utiliser le compile fonction pour changer le modèle DOM pour tout ce que vous voulez si votre directive exige.

Dans la plupart des cas tElem et iElem sera le même élément du DOM, mais parfois il peut être différent si une directive clones le modèle de timbre des copies multiples (cf. ngRepeat).

Derrière les coulisses, Angulaire utilise un 2-way processus de rendu (compilation + lien) afin de timbre des copies de la compilation d'un morceau de DOM, pour éviter Angulaire de processus (= analyse des directives) de la même DOM maintes et maintes fois pour chaque instance dans le cas où la directive timbres plusieurs clones résultant dans de bien meilleures performances.

Espère que ça aide!

---

AJOUTÉ APRÈS LE COMMENTAIRE:

La différence entre un template et compile fonction:

Fonction de modèle

{
    template: function(tElem, tAttrs){

        //Generate string content that will be used by the template
        //function to replace the innerHTML with or replace the
        //complete markup with in case of 'replace:true'
        return 'string to use as template';
    }
}

De la compilation de la fonction

{
    compile: function(tElem, tAttrs){

        //Manipulate DOM of the element yourself
        //and return linking function
        return linkFn(){};
    }
}

Le modèle de la fonction est appelée avant la compilation de la fonction est appelée.

Bien qu'ils puissent effectuer presque identique trucs et partagent la même "signature", la principale différence est que la valeur de retour de la fonction de modèle va remplacer le contenu de la directive ou de la directive de balisage si replace: true), tandis que la compilation de la fonction est prévu de modifier le DOM par programme et le retour d'une fonction link (ou de l'objet avec pré et post le lien de fonction).

En ce sens que vous pouvez penser de la fonction de modèle, comme une sorte de fonction de commodité pour ne pas avoir à utiliser la compilation en fonction de si vous avez simplement besoin de remplacer le contenu d'une chaîne de valeur.

Espère que ça aide!