Angularjs - insert $ compile-d html

Question

(Note that you do not need to know about datatables for this.)

I am creating a directive to handle DataTables . What I would like to do is an action column with two icons - edit and delete. These icons should respond to ng-click.

Datatables allow you to do this by providing a callback for a given column definition ( mRender ). This callback returns an html string for this cell value, which is inserted into the DOM instead of the actual cell value.

Checkout plunker . Two important functions stand out:

• renderActionIcon is my implementation of the callback mentioned above. It generates the HTML string that I need in the cell.
• registerNewHtmlWithAngular is a function where I supposedly let angular know about the ng clicks that I need to register for this column.

What should be done in registerNewHtmlWithAngular ?

If $ compile html, angular adds the appropriate event listeners and returns an element to me, but since the Datatables function expects HTML, these registered elements will not be added to the DOM.

Any ideas? Thanks guys!

Answer 1

After a day of keystrokes:

It seems that there is no way to compile in html and it can be used in the DOM. It must be an element that is inserted into the DOM, so that event listeners are not lost.

The way I solved the problem in this particular scenario is to simply paste the HTML and start compiling $ in the new HTML later.

Datatables simplifies the fnCreatedRow , which, after rendering the string, returns the Element and allows you to do whatever you want with it. In this case, I ran $ compile over the line and put it back in Datatables. See rowCompiler Function in the updated plunker .

Answer 2

Since datatables uses innerHTML = mRender (...) to insert html (so it will still convert anything to a string and you will lose the results of the $ compilation function. I think there is no way to do this with mRender without hacks - for example, you can slightly modify the datatables, so it will use $ .append instead of innerHTML, but this is not a good practice, so in our project we use the usual jquery bindings instead of ng-click.