2015-03-04 9 views
38

Ich habe eine rekursive Angular-Direktive, die eine Template-Variable verwendet und in der link-Funktion kompiliert wird.

Problem ist, dass meine Vorlage wirklich lange und außer Kontrolle geraten ist und ich es in einer externen HTML-Datei externalisieren möchte (es würde es auch einfacher machen, automatisch einzuziehen).

Wie kann man eine externe Vorlage in eine Direktive laden, die innerhalb der $compile verwendet werden kann?

Ich habe gesehen, aber das lässt mich die Variable nicht benennen und an die $compile Funktion übergeben.

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

und

Antwort

93

Sie können mit den $templateRequest Service um die Vorlage zu erhalten. Dies ist ein Convenience-Service, der auch die Vorlage in $templateCache zwischenspeichert, so dass nur eine einzige Anforderung an template.html gestellt wird.

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

plunker (überprüfen Sie die Registerkarte Netzwerk eine einzige Netzwerkanforderung zu sehen)

+11

Das ist großartig! Sie sind mein Held! Kann ich dir einen Kaffee kaufen? – CodyBugstein

+0

Ich bin neugierig, ist es möglich, HTML-Bindung (ng-bind-html) innerhalb der "template.html" in Ihrer Abbildung zu verwenden? Ich kann es nicht funktionieren lassen. – zhekaus

+1

@zhekaus, ja, aber Sie müssen immer noch die üblichen 'ngSanitize' /' $ sanitize' verwenden oder sonst '$ sce.trustAsHtml' verwenden –

2

Ich ziehe http verwenden $ Vorlage zu laden, wenn seine Größe größer ist: -

$http.get('mytemp.html').then(function(response) { 
      element.html(response.data); 
      $compile(element.contents())(scope); 
      }); 
+1

warum:

Zur Veranschaulichung (und ohne rekursive Richtlinien in der Frage geht), wird dies wie so verwendet? ist es mehr vorformant? macht Netzwerk schneller? – VeXii

+1

Sie sollten die Vorlagen, die Sie laden, wie '$ http.get (' mytem.html ', {cache: $ templateCache}) zwischenspeichern, und dann (function (response) { element.html (response.data); $ compile (element.contents()) (scope); }) ' – Leonardo

+1

Es gibt eine fehlende Klammer im Code, aber ich kann nicht bearbeiten, weil es weniger als 6 Zeichen ist :) – Leonardo

Verwandte Themen