AngularJSテンプレートを文字列に変換するにはどうすればよいですか？

私の変数をそのテンプレートに渡してレンダリングさせ、結果のHTMLを文字列として取得したいとします。AngularJSテンプレートを文字列に変換するにはどうすればよいですか？

AngularJSでどうすればいいですか？ render_to_string()function in Djangoと同様の機能はありますか？

問題は私がemail.htmlテンプレートを持っていることです（わかります、電子メールをレイアウトするのは苦しいです）。変数を設定したいと思います。

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

：私は、その後にかなった同様のを期待 data = {name: 'Foo', email: '[email protected]' }

：

<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>

を私はオブジェクトを持っている：

Let'sはemail.htmlの内容がかなったようであることをasume

最後に、messageBodyHtmlには次の内容の文字列が含まれます：

<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>

出典

2017-11-24 alamasfu10

でかなり多くを行うことができます表示されますhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

を表示することができます。まず、html,head、bodyというタグをテンプレートから削除します。不要にする必要はありません。

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

email.htmlは、テンプレートをコンパイルするサービス$compileを使用してください。

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

それが終了するまで待機してからnewElem.html()を使用するように$timeoutを使用し、ngIncludeを使用してテンプレートを取得angular.elementを使用して、テンプレートを使用してelementを作成し、$compile。

このコードは、関数またはディレクティブ内に配置してください。

希望します。

出典

2017-11-24 16:37:19

' $ compile'サービスが正しい方向です！どうもありがとう！ – alamasfu10

あなたの質問を理解しているかどうかは十分にはわかりませんが、これが役立つと思います。

したがって、いくつかの変数をテンプレートに表現してレンダリングしたいとします。私があなたを理解すれば、これは文字列の書式に似ています。 AngularJSでは、テンプレートリテラルと呼ばれるものを使用できます。私は部分的にあなたがES2015以上を必要とすると信じていますが、何か他のものと呼ばれていたJavaScript仕様が導入されたかどうかは十分にはわかりません。

let name = 'Bob'; 

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

あなたは文字列が初期化されるようにレンダリングされる表現として名を使用：あなたはこのような何かを定義することができますリテラルで

。

これは、複数の文字列を連結するために痛みを伴うのではなく、複数行の文字列にも使用できます。

編集：これについての詳細のためにあなたは、あなたがプログラムであなたのHTMLをコンパイルしようとすることができ、この機能

出典

2017-11-24 12:16:32 kmjb

ありがとうございました！私はそれをもっと明確にするために私の質問を編集しました。私は文字列の形成について知っていた。それはうまくいくでしょうが、私が含めることを望む 'html'の内容は膨大です。メールテンプレートのレイアウトがどれほど苦労しているか分かります:) – alamasfu10

AngularJSテンプレートを文字列に変換するにはどうすればよいですか？

答えて

関連する問題