Compiling dynamic HTML strings from database

Question

The Situation Nested within our Angular app is a directive called Page  backed by a controller  which contains a div with an ng-bind-html-unsafe attribute  This is assigned to a  scope var called  pageContent   This var gets assigned dynamically generated HTML from a database  When the user flips to the next page  a called to the DB is made  and the pageContent var is set to this new HTML  which gets rendered onscreen through ng-bind-html-unsafe  Here s the code  Page directive angular module  myApp directives        directive  myPage   function   compile             return               templateUrl   page html               restrict   E               compile  function compile element  attrs  transclude                       does nothing currently                 return                       pre  function preLink scope  element  attrs  controller                               does nothing currently                                            post  function postLink scope  element  attrs  controller                               does nothing currently                                                                           Page directive s template   quot page html quot  from the templateUrl property above   lt div ng-controller  quot PageCtrl quot   gt             lt  -- dynamic page content written into the div below -- gt      lt div ng-bind-html-unsafe  quot pageContent quot   gt          lt  div gt   Page controller angular module  myApp      controller  PageCtrl   function   scope              scope pageContent                 scope  on   quot receivedPageContent quot   function event  args                console log   new page content received after DB call                  scope pageContent   args htmlStrFromDB                    That works  We see the page s HTML from the DB rendered nicely in the browser  When the user flips to the next page  we see the next page s content  and so on  So far so good  The Problem The problem here is that we want to have interactive content inside of a page s content  For instance  the HTML may contain a thumbnail image where  when the user clicks on it  Angular should do something awesome  such as displaying a pop-up modal window  I ve placed Angular method calls  ng-click  in the HTML strings in our database  but of course Angular isn t going to recognize either method calls or directives unless it somehow parses the HTML string  recognizes them and compiles them  In our DB Content for Page 1   lt p gt Here s a cool pic of a lion   lt img src  quot lion png quot  ng-click  quot doSomethingAwesone  lion    showImage   quot   gt  Click on him to see a large image  lt  p gt   Content for Page 2   lt p gt Here s a snake   lt img src  quot snake png quot  ng-click  quot doSomethingAwesone  snake    playSound   quot   gt Click to make him hiss  lt  p gt   Back in the Page controller  we then add the corresponding  scope function  Page controller  scope doSomethingAwesome   function  id  action         console log   quot Going to do  quot    action    quot  with  quot   id       I can t figure out how to call that  doSomethingAwesome  method from within the HTML string from the DB  I realize Angular has to parse the HTML string somehow  but how  I ve read vague mumblings about the  compile service  and copied and pasted some examples  but nothing works  Also  most examples show dynamic content only getting set during the linking phase of the directive  We would want Page to stay alive throughout the life of the app  It constantly receives  compiles and displays new content as the user flips through pages  In an abstract sense  I guess you could say we are trying to dynamically nest chunks of Angular within an Angular app  and need to be able to swap them in and out  I ve read various bits of Angular documentation multiple times  as well as all sorts of blog posts  and JS Fiddled with people s code  I don t know whether I m completely misunderstanding Angular  or just missing something simple  or maybe I m slow  In any case  I could use some advice

User · Answer

Try this below code for binding html through attr   directive  dynamic   function   compile        return         restrict   A         replace  true        scope    dynamic    dynamic          link  function postLink scope  element  attrs            scope  watch   attrs dynamic    function html             element html scope dynamic              compile element contents    scope                                        Try this element html scope dynamic   than element html attr dynamic

User · Answer

You can use      ng-bind-html  https   docs angularjs org api ng service  sce   directive to bind html dynamically   However you have to get the data via  sce service    Please see the live demo at http   plnkr co edit k4s3Bx  var app   angular module  plunker        app controller  MainCtrl   function  scope  sce         scope getHtml function       return  sce trustAsHtml   lt b gt Hi Rupesh hi  lt u gt dfdfdfdf lt  u gt   lt  b gt sdafsdfsdf lt button gt dfdfasdf lt  button gt                  lt body ng-controller  MainCtrl  gt   lt span ng-bind-html  getHtml    gt  lt  span gt     lt  body gt

User · Answer

In angular 1 2 10 the line scope  watch attrs dynamic  function html    was returning an invalid character error because it was trying to watch the value of attrs dynamic which was html text   I fixed that by fetching the attribute from the scope property    scope    dynamic    dynamic       My example  angular module  app      directive  dynamic   function   compile        return         restrict   A         replace  true        scope    dynamic    dynamic          link  function postLink scope  element  attrs            scope  watch   dynamic    function html             element html html              compile element contents    scope

User · Answer

Found in a google discussion group   Works for me   var  injector   angular injector   ng    myApp      injector invoke function  rootScope   compile       compile element   rootScope

User · Answer

ng-bind-html-unsafe only renders the content as HTML  It doesn t bind Angular scope to the resulted DOM  You have to use  compile service for that purpose  I created this plunker to demonstrate how to use  compile to create a directive rendering dynamic HTML entered by users and binding to the controller s scope  The source is posted below   demo html   lt  DOCTYPE html gt   lt html ng-app  app  gt      lt head gt       lt script data-require  angular js 1 0 7  data-semver  1 0 7  src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular js  gt  lt  script gt       lt script src  script js  gt  lt  script gt     lt  head gt      lt body gt       lt h1 gt Compile dynamic HTML lt  h1 gt       lt div ng-controller  MyController  gt         lt textarea ng-model  html  gt  lt  textarea gt         lt div dynamic  html  gt  lt  div gt       lt  div gt     lt  body gt    lt  html gt    script js  var app   angular module  app         app directive  dynamic   function   compile      return       restrict   A       replace  true      link  function  scope  ele  attrs          scope  watch attrs dynamic  function html            ele html html            compile ele contents    scope                             function MyController  scope       scope click   function arg        alert  Clicked     arg          scope html     lt a ng-click  click 1   href     gt Click me lt  a gt

[html] Compiling dynamic HTML strings from database

Try this below code for binding html through attr

Examples related to html

Examples related to dom

Examples related to dynamic

Examples related to angularjs

Examples related to compilation