javascript - AngularJS 和动态 HTML

Question

我有一个带有 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]);

请帮忙。

Answer 1

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

举个例子:

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

那应该已经可以工作了!