Jakie są korzyści z funkcji szablonu dyrektywy w Angularjs?

Funkcja kompilacji może być użyta do zmiany DOM, zanim wynikowa funkcja szablonu zostanie powiązana z zakresem.

Rozważ następujący przykład:

<div my-directive></div>

Możesz użyć funkcji kompilacji, aby zmienić DOM szablonu w następujący sposób:

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

Możesz więc użyć funkcji compile, Aby zmienić szablon DOM na dowolny, jeśli wymaga tego twoja dyrektywa.

W większości przypadków tElem i iElem będą tym samym elementem DOM, ale czasami może być inaczej, jeśli dyrektywa klonuje szablon w celu wytłoczenia wielu kopii (por. ngRepeat).

Za kulisami, Angular używa dwukierunkowego procesu renderowania (compile + link) do stemplowania kopii skompilowanego fragmentu DOM, aby zapobiec konieczności przetwarzania (= parsowania dyrektyw) tego samego DOM w kółko dla każdej instancji w przypadku, gdy dyrektywa stempluje wiele klonów, co skutkuje znacznie lepszą wydajnością.

Mam nadzieję, że to pomoże!

DODANY PO Komentarz:

Różnica między funkcją template i compile:

Funkcja szablonu

{
    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';
    }
}

Funkcja kompilacji

{
    compile: function(tElem, tAttrs){

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

Funkcja szablonu jest wywoływana przed wywołaniem funkcji kompilacji.

Chociaż mogą wykonywać prawie identyczne rzeczy i dzielić ten sam 'podpis', kluczową różnicą jest to, że wartość zwracana funkcji szablonu zastąpi treść dyrektywy (lub kompletny znacznik dyrektywy if replace: true), podczas gdy kompilator oczekuje się, że funkcja zmieni programowo DOM i zwróci funkcję link (lub obiekt z funkcją pre i post link).

W tym sensie możesz myśleć o funkcji szablonu jako o funkcji wygodnej, ponieważ nie musisz używać funkcji kompilacji, jeśli po prostu musisz zastąpić zawartość wartością łańcuchową.

Mam nadzieję, że to pomoże!