用于动态电子邮件的Angular $ compile模板

Question

我正在尝试在其中加载带有ng-repeats的html模板,然后使用该$compile服务编译它并在电子邮件中使用已编译的html.

问题....好问之前让我设置术语...绑定占位符:{{customer.name}} 绑定值:'john doe'

使用$interpolatei获取实际绑定值但不适用于ng-repeats.

示例:var html = $interpolate('<p>{{customer.name}}</p>')($scope) 返回:'<p>john doe</p>' Ng-repeats不起作用

使用$compile我得到绑定占位符,{{customer.name}}但我需要的是绑定值'john doe'.

示例var html = $compile('<p>{{customer.name}}</p>')($scope:)返回:'<p>{{customer.name}}</p>'

一旦我追加到页面,我就会看到绑定值.但这是用于电子邮件而不是页面加上它具有$compile可以编译的ng-repeats

如何创建动态电子邮件模板,在编译后,它会返回带有绑定值的html而不仅仅是绑定占位符,以便我可以将其作为电子邮件发送？

Answer 1

使用$ compile是正确的方法.但是,$compile(template)($scope)不会产生您期望的插值HTML.它只是将编译的模板链接到下一个要插入的范围$digest.要获得所需的HTML,您需要等待插值发生,如下所示:

var factory = angular.element('<div></div>');
factory.html('<ul ng-repeat="...">...</ul>');
$compile(factory)($scope);

// get the interpolated HTML asynchronously after the interpolation happens
$timeout(function () {
  html = factory.html();
  // ... do whatever you need with the interpolated HTML
});

(工作CodePen示例:http://codepen.io/anon/pen/gxEfr？编辑= 101 )