TL; DR

Question

我编译了一个字符串，但它没有像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中显示我的实际数据。

Answer 1

TL; DR

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

e.g。

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。

如何在html中设置$ compile代码

1 个答案:

TL; DR

Angular的编译器如何工作？