I've a HTML line with AngularJS directive that I am inserting dynamically through some jQuery controls that are being used since 2009. I cannot change this Control. However, I want to start using angular JS.
The generated HTML for a grid, column rating, is:
<div star-rating rating-value="1005" max="5"> </div>
What I want is to get this html compiled.
At present AngularJS is not able to see this dynamically generated HTML.
The only way I can think of is if I call a javascript function for each jQuery insert (The Grid control I am using can compile JavaScript function).
fnCompileDynamicHTML('<div star-rating rating-value=23 max=5></div>)
And function:
fnCompileDynamicHTML(html) {
return $compile(html)($scope) // or something?
}
I have followed what is mentioned here. However my application is complaining about:
App Already Bootstrapped with this Element.
Well it is not because it is a new object, and new inner HTML.
This is what I have in the loop of 100:
evt.row.cells[glbCandidateListColumnIndex.rank].innerHTML = '<div star-rating rating-value="' + rank + '" ></div>';
fnCompileDynamicAngularJS(evt.row.cells[glbCandidateListColumnIndex.rank]);
Please help.
evt.row.cells[glbCandidateListColumnIndix.rank].appendChild(fnCompileDynamicAngularJS('<div star-rating rating-value="' + rank + '" ></div>'));? A call to$compile(html)(scope)returns an$elementwhich you have toappendto the right place. You may also need a call to.node()on the returned$elementto get the DOM element. – musically_ut Feb 15 '14 at 0:14