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

Question

我正在尝试加载一个带有 ng-repeats 的 html 模板，然后使用 $compile服务来编译它并在电子邮件中使用编译后的 html。

问题......好吧，在问之前让我设置术语......
绑定(bind)占位符:{{customer.name}}绑定(bind)值:'john doe'
使用 $interpolate我得到了实际的绑定(bind)值，但不适用于 ng-repeats。

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

使用 $compile我得到了绑定(bind)占位符，即 {{customer.name}}但我需要的是绑定(bind)值'john doe' .

示例:var html = $compile('<p>{{customer.name}}</p>')($scope )
返回:'<p>{{customer.name}}</p>'
附加到页面后，我会看到绑定(bind)值。但这是用于电子邮件而不是页面，而且它有 ng-repeats $compile可以编译

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

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?editors=101)