0

Sort of a weird problem that I'm not exactly sure what is going on so I will try to be as clear as I can.

I am bringing html content through a json object and placing it in a div. The problem I am having is when I bring html in that runs javascript in through a directive, it does not seem to be running. For example - I'm playing around with this http://cmaurer.github.io/angularjs-nvd3-directives/ , a d3 directive for angular.

If I have the html on the template it works fine - I'm using an example from their page that looks like so -

<nvd3-stacked-area-chart data="exampleData" id="exampleId" showXAxis="true" showYAxis="true" showControls="true" width="700" height="200"> <svg></svg> </nvd3-stacked-area-chart>

This works fine when placed on the page, however when I bring it in through the json, it seems the directive (or angular? ) is not running on it.

For reference the part of the json comes in like this - 

  'content' : '<nvd3-stacked-area-chart data="exampleData" id="exampleId" showXAxis="true" showYAxis="true" showControls="true" width="700" height="200"> <svg></svg> </nvd3-stacked-area-chart>',

then is bound like this 

ng-bind-html="widget.content"

This seems to work fine, if I inspect the element I can see the correct html sitting there. I have a $sce.trustAsHtml inside my controller to make sure it's properly escaped.

So I'm not sure how to approach this issue, because there are no specific errors thrown, so I'm not sure if it's angular, or the directive, or the order of events? Is there a way to re-initialize the d3 directive for example on this once the html content is loaded into the div?

I'm not sure where to begin with this, so I would much appreciate any insight. Thank you for reading!

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133

1 Answers1

2

By the time you load the content received by wire, angular has already finished compiling and linking the page. therefor, you need to tell it to recompile. Have a look at this SO and try to call $compile by hand after receiving the content and placing it in the div: How do I make angular.js reevaluate / recompile inner html?

Keep in mind though that this is rather tricky business and you should really check the security of what you're doing.

Community
  • 1
  • 1
Adrian B.
  • 1,592
  • 1
  • 20
  • 38
  • 1
    Just to add to this, take a look at this question which is talking about `$compile` and `ng-bind-html`: http://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml – jValdron Dec 02 '14 at 16:27
  • I was able to find a solution with your suggestions. Thank you! – ajmajmajma Dec 02 '14 at 16:47