Użycie $compile na zewnętrznym szablonie (templateURL) w dyrektywie Angular

Mam rekurencyjną dyrektywę kątową, która używa zmiennej szablonowej i jest kompilowana w funkcji link.

Problem polega na tym, że mój szablon jest naprawdę długi i wymknął się spod kontroli i chcę go uzewnętrznić w zewnętrznym pliku HTML(ułatwiłoby to również np. automatyczne wcięcie).

Jak można załadować zewnętrzny szablon do dyrektywy, która może być użyta wewnątrz $compile?

Widziałem templateURL, ale to nie pozwala mi nazwać zmiennej i przekazać ją do funkcji $compile.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

I

Author: CodyBugstein, 2015-03-04
Source

2 answers

Możesz użyć usługi $templateRequest, Aby uzyskać szablon. Jest to wygodna usługa, która również buforuje szablon w $templateCache, dzięki czemu składa się tylko jedno żądanie do template.html.

Jako ilustrację (i bez wchodzenia w kwestię dyrektyw rekurencyjnych), używa się tego w następujący sposób: 

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

Plunker (sprawdź kartę Sieć, aby zobaczyć pojedyncze żądanie sieciowe)

 97
Author: New Dev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-22 18:12:33

Wolę użyć $http do załadowania szablonu, jeśli jego rozmiar jest Większy: - 

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });
 3
Author: squiroid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-08 14:07:43