AngularJS и динамический HTML

Question

У меня есть строка HTML с директивой AngularJS, которую я динамически вставляю через некоторые элементы управления jQuery, которые используются с 2009 года. Я не могу изменить этот элемент управления. Тем не менее, я хочу начать использовать угловой JS.

Сгенерированный HTML для сетки, рейтинг колонки, является:

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

То, что я хочу, чтобы получить этот HTML компиляции.

В настоящее время AngularJS не может видеть этот динамически сгенерированный HTML.

Единственный способ, о котором я могу думать, это если я вызываю функцию javascript для каждой вставки jQuery (элемент управления 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

Вы должны либо загрузить Angular.js после компиляции DOM с помощью вашей внешней библиотеки делается, называя angular.bootstrap(documented here), или вы можете заставить компиляцию этого конкретного узла DOM вручную (сложнее !!!)

качестве пример:

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

Это должно работать уже!