如何基于AngularJS的ng-repeat动态构建邮件用HTML表格模板

这个问题我之前也碰到过——AngularJS的指令确实是为浏览器环境设计的，直接发送带ng-repeat的模板肯定不行，因为邮件客户端不会帮你运行Angular解析指令。这里有两个可行的方案，你可以根据自己的技术栈和需求选择：

方案一：在Node.js环境中用AngularJS编译模板 #

如果你坚持要用AngularJS的语法，我们可以在后台用Node.js模拟浏览器环境，让Angular完成模板编译，生成最终的HTML再发送。

步骤： #

1. 先安装依赖包：

npm install angular jsdom

2. 编写编译代码：

const angular = require('angular');
const { JSDOM } = require('jsdom');

// 模拟浏览器DOM环境，Angular需要依赖DOM API
const dom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

// 创建Angular模块
angular.module('emailTemplateModule', []);

// 编译模板的核心函数
function generateEmailHtml(title, peopleData) {
  // 带ng-repeat的模板（先替换Title占位符）
  const template = `
    <h1>${title}</h1>
    <table style="width:100%;border-collapse:collapse;">
      <tr style="background:#f0f0f0;">
        <th style="border:1px solid #ddd;padding:8px;">Firstname</th>
        <th style="border:1px solid #ddd;padding:8px;">Lastname</th>
        <th style="border:1px solid #ddd;padding:8px;">Age</th>
      </tr>
      <tr ng-repeat="person in people" style="border:1px solid #ddd;">
        <td style="border:1px solid #ddd;padding:8px;">{{person.firstName}}</td>
        <td style="border:1px solid #ddd;padding:8px;">{{person.lastName}}</td>
        <td style="border:1px solid #ddd;padding:8px;">{{person.age}}</td>
      </tr>
    </table>
  `;

  // 初始化Angular注入器，编译模板
  const $injector = angular.injector(['ng', 'emailTemplateModule']);
  return $injector.invoke(['$compile', '$rootScope', ($compile, $rootScope) => {
    // 将数据挂载到Angular作用域
    $rootScope.people = peopleData;
    // 把模板转为Angular元素
    const element = angular.element(template);
    // 编译并链接到作用域
    $compile(element)($rootScope);
    // 触发digest循环，让Angular解析指令和绑定
    $rootScope.$digest();
    // 返回最终的HTML字符串
    return element.html();
  }]);
}

// 使用示例
const emailTitle = 'Team Member List';
const people = [
  { firstName: 'Jill', lastName: 'Smith', age: 50 },
  { firstName: 'Eve', lastName: 'Jackson', age: 94 },
  { firstName: 'Bob', lastName: 'Brown', age: 35 }
];

const finalEmailContent = generateEmailHtml(emailTitle, people);
console.log(finalEmailContent); // 这里得到的就是可以直接发送的HTML

注意点： #

• 邮件HTML建议用内联样式，因为大部分邮件客户端不支持外部样式表或<style>标签。
• 模拟DOM环境会有一定性能开销，如果是高并发场景需要考虑优化。

方案二：换用服务器端模板引擎（更简单） #

如果不需要AngularJS的其他特性，只是要循环生成表格，用专门的服务器端模板引擎会更高效，比如Handlebars、EJS或Nunjucks。这里以Handlebars为例：

步骤： #

1. 安装依赖：

npm install handlebars

2. 编写模板和渲染代码：

const handlebars = require('handlebars');

// 定义模板（用Handlebars的循环语法{{#each}}）
const templateSource = `
<h1>{{title}}</h1>
<table style="width:100%;border-collapse:collapse;">
  <tr style="background:#f0f0f0;">
    <th style="border:1px solid #ddd;padding:8px;">Firstname</th>
    <th style="border:1px solid #ddd;padding:8px;">Lastname</th>
    <th style="border:1px solid #ddd;padding:8px;">Age</th>
  </tr>
  {{#each people}}
  <tr style="border:1px solid #ddd;">
    <td style="border:1px solid #ddd;padding:8px;">{{firstName}}</td>
    <td style="border:1px solid #ddd;padding:8px;">{{lastName}}</td>
    <td style="border:1px solid #ddd;padding:8px;">{{age}}</td>
  </tr>
  {{/each}}
</table>
`;

// 编译模板
const template = handlebars.compile(templateSource);

// 准备数据
const data = {
  title: 'Team Member List',
  people: [
    { firstName: 'Jill', lastName: 'Smith', age: 50 },
    { firstName: 'Eve', lastName: 'Jackson', age: 94 }
  ]
};

// 渲染生成最终HTML
const finalEmailContent = template(data);
console.log(finalEmailContent);

优势： #

• 不需要模拟浏览器环境，性能更好。
• 模板语法简洁，专门为服务器端渲染设计，学习成本低。

为什么你之前的做法无效？ #

AngularJS的ng-repeat等指令属于客户端指令，必须在Angular应用初始化并运行消化循环（digest cycle）后才会被解析成实际的DOM元素。邮件客户端不会加载和运行AngularJS代码，所以只会显示原始的ng-repeat标签，而不是生成的表格行。

内容的提问来源于stack exchange，提问作者Better Tomorrow