【问题标题】：how to set $compile code in html如何在html中设置$compile代码
【发布时间】：2017-08-04 10:11:35
【问题描述】：

我编译了一个字符串，但它并没有反映在 dom 上。

我有一些类似的字符串：

result = '<tr ng-click="someFun()" rowid="hh_'+gameId+'" id="hh_'+gameId+'" ng-class="game.currVideoReplay[' + gameId + '] ? \'active-current-hand\':\'\'">' + uCHtml + cCHtml + pTHtml + dCV +'</tr>';

result = $compile(result)($scope);

angular.element(document.querySelector("tbody")).html(result);

但它在 DOM 上显示如下：

<tbody class="hh-list">[[object HTMLTableRowElement]]</tbody>

问题是我如何在 DOM 中显示我的实际数据。

【问题讨论】：

你试过这个$compile(result)($scope).html();吗？？
您应该在模板中定义您的 html，并避免在您可以使用的代码中构建它
no @RameshRajendran 它不起作用，#devqon 我不能这样做，因为我的字符串来自服务器
请在调用 $compile 之前告诉我们 console.log(result) 返回什么
并尝试 element.find('tbody').append(result); （您可以在指令中将元素注入到您的链接函数中，如果它是控制器，则可以注入 $element

标签： javascript html angularjs angularjs-directive angularjs-scope

【解决方案1】：

TL;DR

$compile 返回一个元素，该元素必须按原样附加到 DOM。您不能只设置 HTML。

例如

angular.element(document.querySelector("tbody")).append(result);

Angular 的编译器是如何工作的？

当您使用 Angular 的 $compile 服务编译标记时，它会解析 HTML 并将其转换为具有单个顶级元素的 DOM 片段。然后它遍历所有元素及其属性以查看是否有任何指令需要应用。将为相关元素对象编译和链接任何指令。

这些指令可能会也可能不会使用 jQuery 或 jQueryLite 的 .data() 方法在元素上存储一些数据。他们还可能添加一些事件处理程序或其他东西。

如果您尝试只获取该 DOM 片段的 HTML，所有 jQuery 数据和事件处理程序以及其他 JS 功能都将丢失。 HTML 本身是惰性的，它不做任何事情。只有附加了 JS 功能，它才会做你所期望的。

所以不要再认为 Angular 会生成 HTML。它真正产生的是一个充满数据和 JS 功能的 DOM 树，这些功能只能用元素对象来表示，而不仅仅是 HTML。

【讨论】：