Question

我想将变量传递给该模板，让它渲染，然后将生成的HTML作为字符串。

我如何在AngularJS中做到这一点？是否有与render_to_string() function in Django类似的功能？

问题是我有一个email.html模板（你知道，布局电子邮件很痛苦），我想用变量填充它。

让我们假设email.html的内容是这样的：

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

我有一个对象：data = {name: 'Foo', email: 'foo@bar.com' }

我希望......类似于：

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

最后，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: foo@bar.com</div>
  </body>
</html>

Answer 1

我不完全确定我是否理解你的问题，但我相信这会有所帮助。

因此，您希望将一些变量表示到模板中并进行渲染。如果我了解你，这听起来几乎像字符串格式。在AngularJS中，您可以使用所谓的模板文字。我部分认为你需要ES2015或更高版本，虽然我不完全确定引入了哪个JavaScript规范，因为它被称为其他。

使用文字，您可以定义如下内容：

let name = 'Bob';

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

您使用name作为表达式，该字符串将在字符串初始化时呈现。

这也可以用于多行字符串而不是痛苦的\ n或+来将字符串连接在一起。

修改：有关详情，请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

你会发现你可以用这个功能做很多事情

Answer 2

您可以尝试以编程方式编译HTML。首先，从模板中删除html，head和body标记，您不需要它们。

email.html

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

使用服务$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());
    });

}]);

使用ngInclude获取模板，使用element创建angular.element $compile，$timeout，使用newElem.html()等到结束，然后使用#!/bin/bash # Data1="PF10_SBCA-B PF5_SBCA-G PF10_SBCE-F PF10_SBCC-W" Data2="PF5_SBCA-B PF10_SBCE-F PF10_SBCA-B PF5_SBCC-W" for value in $Data1 do if [ $(echo $Data2 | grep -c $value) -eq 0 ] then echo $value fi done。

将此代码放在函数或指令中。

希望有所帮助

如何将AngularJS模板转换为字符串？

2 个答案: