0

I have a page whose contents is to be defined based on data retrieved from a DB.

I'm doing it by setting a "div" with ng-bind-html and deploying the html contents (build within the page's controller) using $sce.trustAsHtml.

This works only the first time. If the contents needs to be rebuilt (e.g. as a result of a user's action), nothing happens.

After some research, I found some posts from which it would appear that a compilation process needs to be invoked, but I'm not sure I understand what this means and how to do it.

So, my questions are:

  1. Is my understanding correct (about the compilation)?

  2. If yes, how should I do it?

  3. Is this compilation also related to the fact that onclick directive does not work on elements built as described above? (note: if I manually deploy the same HTML code as generated by the JavaScript, the onclick directive works perfectly).

Addition

The sample code is (HTML):

<table class="table table-hover table-condensed" ng-bind-html="This_Table_Results" style="width:100%;border: 1px solid gray;padding:5px 5px 5px 5px"> </table>

And the controller's piece:

$scope.This_Table_Results = $sce.trustAsHtml (l_Data_Table) ;

where l_Data_Table contains the HTML needed to build the table.

halfer
  • 19,824
  • 17
  • 99
  • 186
FDavidov
  • 3,505
  • 6
  • 23
  • 59
  • please post a snippet or example of the code that does not work. it will help people trying to help you. :) – toskv Oct 09 '15 at 17:17
  • @toskv, thanks for your reply. Here you have a sample HTML code: `
    ' And within the controller: `$scope.This_Table_Results = $sce.trustAsHtml (l_Data_Table) ;'     – FDavidov Oct 09 '15 at 17:37
  • The snippet should be in your question body. :) – toskv Oct 09 '15 at 18:02

1 Answers1

0

You might want to check out the accepted answer over here:

Rendering directives within $sce.trustAsHtml

"In order to dynamically add HTML, you should be looking at the $compile service (and/or directives). [...]"

There also is a link to a plunker showing how to use a directive to compile the HTML provided.

Community
  • 1
  • 1
Oliver
  • 519
  • 5
  • 11
  • According to the documentation you referred me to, it looks that I'm not doing the right thing altogether. My need is to be able to change the contents of a page dynamically (e.g. based on user's action, change from the display of a data table to a display of a different data table with different structure and, of course, data). Is there a better approach to this? – FDavidov Oct 09 '15 at 17:43
  • Best way to change the content of a page dynamically might be the ngShow directive, which you can provide a scope variable, e.g.:
    – Oliver Oct 09 '15 at 18:00
  • The problem is that there is no a finite set of table templates that can be defined. In theory, there is an unlimited number of different tables that can be presented, depending on the user and the action triggered by him. This is why the tables are fully defined within the JS. – FDavidov Oct 09 '15 at 21:17