Execute <script> tags binded via ng-bind-html in AngularJS

Question

I've searched and searched for a good answer to this and - I promise - and I know there a lot of answers out there that are similar.

I've read this: In AngularJS, any inline javascript code that included in HTML templates doesn't work

I've tried creating a directive that listens for the div to update and $compiles it again - something like this: http://www.bennadel.com/blog/2745-creating-custom-script-tag-directives-in-angularjs.htm

However, nothing I've found answers exactly what I need. Basically, I created a news site at work and the story pages are populated by producers via a Drupal install, that populates a Redis DB which powers our site via a REST API.

Then content of these pages is populated like so:

<div class="topExtraHtml" ng-bind-html="extras.html.top"></div>

From time to time the producers like to add embeds in stories that require external js, so the extras.html.top could potentially be something to the effect of:

<script src="http://outsidesource.com/embedcode.js"></script>
<div id="the-js-will-populate-me"></div>

Is it even possible to get this to work? I'm totally stumped.

According to the linked SO question you need jQuery to inject scripts in templates. Have you tried including jQuery in your project? It needs to be added before the angular script so jQuery gets used instead of jqLite — yvesmancera
– yvesmancera, Commented Jul 20, 2015 at 17:13

frozenamazon · Accepted Answer · 2015-07-20 22:59:24Z

0

If you are trying to embed javascript in real time, currently Angular 1.0 doesn't handle it. Angular 2.0 would be able to handle injection of scripts etc. One way to get around this is either use RequireJS or Browerserify. Would it be possible for the producers to put an entry into a JS file, (separate to the HTML)?

answered Jul 20, 2015 at 22:59

frozenamazon

92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Johnson Over a year ago

Not really unfortunately, they are pretty savvy journalists but not so much when it comes to code. How would RequireJS help with this? Don't the dependencies need to be defined beforehand?

frozenamazon Over a year ago

Yes, but it is a config file. It's easier to manage, and they can just include it into the js file (JSON format). If they are too lazy to include it into two different locations, you probably can scan the HTML and build your config file on runtime

Collectives™ on Stack Overflow

Execute <script> tags binded via ng-bind-html in AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related