AngularJS 和动态 HTML答案

【问题标题】：AngularJS and dynamic HTMLAngularJS 和动态 HTML
【发布时间】：2014-02-18 04:56:19
【问题描述】：

我有一个带有 AngularJS 指令的 HTML 行，我通过自 2009 年以来使用的一些 jQuery 控件动态插入该指令。我无法更改此控件。但是，我想开始使用 Angular JS。

为网格、列评分生成的 HTML 是：

  <div star-rating rating-value="1005" max="5"> </div>

我想要的是编译这个 html。

目前 AngularJS 无法看到这个动态生成的 HTML。

我能想到的唯一方法是，如果我为每个 jQuery 插入调用一个 javascript 函数（我使用的 Grid 控件可以编译 JavaScript 函数）。

fnCompileDynamicHTML('<div star-rating rating-value=23 max=5></div>)

及功能：

fnCompileDynamicHTML(html) {
    return $compile(html)($scope) // or something?
}

我遵循了here 中提到的内容。但是我的应用程序抱怨：

App Already Bootstrapped with this Element.

这不是因为它是一个新的对象和新的内部 HTML。

这就是我在 100 循环中所拥有的：

 evt.row.cells[glbCandidateListColumnIndex.rank].innerHTML = '<div star-rating rating-value="' + rank + '" ></div>';
 fnCompileDynamicAngularJS(evt.row.cells[glbCandidateListColumnIndex.rank]);

请帮忙。

【问题讨论】：

evt.row.cells[glbCandidateListColumnIndix.rank].appendChild(fnCompileDynamicAngularJS('<div star-rating rating-value="' + rank + '" ></div>')); ?对$compile(html)(scope) 的调用会返回一个$element，您必须将append 发送到正确的位置。您可能还需要在返回的 $element 上调用 .node() 以获取 DOM 元素。

标签： javascript html angularjs

【解决方案1】：

您应该在外部库完成 DOM 编译后加载 Angular.js，调用 angular.bootstrap (documented here)，或者您可以手动强制编译该特定 DOM 节点（更难！！！）

举个例子：

angular.module('myApp', []).directive('myDirective', function () {});
angular.bootstrap(document.body, ['myApp']);

应该已经可以了！

【讨论】：