Wie kann ich eine AngularJS-Vorlage in eine Zeichenfolge umwandeln?

Ich möchte meine Variablen in diese Vorlage übergeben, sie rendern lassen und dann das resultierende HTML als Zeichenfolge erhalten.Wie kann ich eine AngularJS-Vorlage in eine Zeichenfolge umwandeln?

Wie kann ich das in AngularJS tun? Gibt es eine ähnliche Funktion wie die render_to_string()function in Django?

Das Problem ist, dass ich eine email.html Vorlage (Sie wissen, Layout E-Mails ist schmerzhaft) und ich möchte es mit Variablen bevölkern.

Lasst uns asume, dass der Inhalt des email.html ist etw wie:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <h1>Hello {{ name }}</h1> 
    <div>We will contact you soon in this email address: {{ email }}</div> 
    </body> 
</html>

Und ich habe ein Objekt: data = {name: 'Foo', email: '[email protected]' }

dann würde ich erwarten, etw ähnlich wie:

let messageBodyHtml = render('path_to_email.html', data)

Und am Ende, dass messageBodyHtml würde eine Zeichenfolge mit diesem Inhalt enthalten:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <h1>Hello Foo</h1> 
    <div>We will contact you soon in this email address: [email protected]</div> 
    </body> 
</html>

Quelle

2017-11-24 alamasfu10

Sie können versuchen, Ihre HTML programmatisch kompilieren. Entfernen Sie zuerst html, head und body Tags aus Ihrer Vorlage, Sie brauchen sie nicht.

email.html

<h1>Hello {{ name }}</h1> 
<div>We will contact you soon in this email address: {{ email }}</div>

Nutzen Sie den Service $compile Ihre Vorlage zu kompilieren.

angular.controller('someController', ['$scope', '$compile', function($scope, $compile){ 

    var templateString = '<div ng-include="\'./email.html\'" ></div>'; 
    var newElem = angular.element(templateString); 

    $compile(newElem)($scope); // or use $scope.$new() 

    // use $timeout to wait until the $digest end and template is fetched/compiled 
    $timeout(function(){ 
     // use .html() to get the final HTML 
     console.log(newElem.html()); 
    }); 

}]);

Vorlage Fetch ngInclude verwenden, erstellen Sie ein element mit Ihrer Vorlage mit angular.element, $compile es, verwenden $timeout bis zum Ende zu warten und dann newElem.html() verwenden.

Platzieren Sie diesen Code in eine Funktion oder eine Direktive.

Hoffe es hilft

Quelle

2017-11-24 16:37:19

Der' $ compile' Service ist die richtige Richtung! Danke vielmals! – alamasfu10

Ich bin mir nicht ganz sicher, ob ich Ihre Frage verstehe, aber ich glaube, das wird helfen.

Sie möchten also einige Variablen in eine Vorlage ausdrücken und sie rendern. Das klingt fast wie eine String-Formatierung, wenn ich Sie verstehe. In AngularJS können Sie Vorlagenliterale verwenden. Ich glaube teilweise, dass Sie ES2015 oder höher benötigen werden, obwohl ich mir nicht ganz sicher bin, welche JavaScript-Spezifikation eingeführt wurde, da sie etwas anderes genannt wurde.

Mit Literale können Sie so etwas wie folgt definieren:

let name = 'Bob'; 

// Notice the use of backqoutes instead of standard quotation syntax 
let templateString = `<div class="content"> ${name} </div>`;

Sie verwendeten Namen als Ausdruck, der als die Zeichenfolge initialisiert gerendert wird wird.

Dies kann auch für mehrzeilige Strings statt der schmerzhaften \ n oder + verwendet werden, um Strings miteinander zu verketten.

Edit: für mehr zu diesem Thema finden Sie https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

sehen Sie werden sehen, Sie

ziemlich viel mit dieser Funktionalität tun können

Quelle

2017-11-24 12:16:32 kmjb

Danke für Ihre Antwort! Ich habe meine Frage bearbeitet, um sie klarer zu machen. Ich wusste über die Formatierung von Strings. Es würde funktionieren, aber der 'html'content, den ich einfügen möchte, ist riesig, du weißt wie schmerzhaft ein E-Mail Template-Layout ist :) – alamasfu10

Wie kann ich eine AngularJS-Vorlage in eine Zeichenfolge umwandeln?

Antwort

Verwandte Themen