Insert HTML with scripts that should run

Question

One part of this app gets HTML back from the server that needs to be shown as live HTML. That's easily done with the ng-bind-html-unsafe="expression" directive (in Angular 1.0.2 at least).

However, the HTML also has JavaScript that should run, since it defines functions used in the HTML, and that doesn't seem to happen using the directive.

Is there some Angular-style way to do that? Or do I need to explore out-of-band script loading techniques?

(Please let's not discuss whether I should trust the server enough to run java-script it sends me. I do trust the server, I'm aware of the risks, and this is a very specialized situation.)

Can the script in the loaded html be a Angular controller? If not then I think it's not possible as Angular (it's actually jquery that they use to load htmls) ignores the script tags. There was a discussion on this some time ago on the google groups. — matys84pl
– matys84pl, Commented Dec 4, 2012 at 21:23
No, I don't control the format of the HTML. It's a ColdFusion or Railo variable dump, generated as the CFML engine sees fit, with js in it to expand and collapse parts of it. Plain old standalone HTML with embedded js. I'm not using full jQuery (so far), just Angular's built-in jQqLite, but the principles are probably the same. Ironically, it strips the functions, but leaves the onclicks that call them there, so you get errors when you click. — enigment
– enigment, Commented Dec 4, 2012 at 22:24

pliashkou · Accepted Answer · 2014-08-21 16:50:59Z

9

I can propose my variant. First you should create directive:

app.directive('html', [ function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.html(attrs.html);
    }
  }
}]);

Then you can use it inside tag.

<div html="{{code}}"></div>

answered Aug 21, 2014 at 16:50

pliashkou

4,1302 gold badges33 silver badges40 bronze badges

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

1 Comment

yash Over a year ago

using a directive based solution similar to this has worked for me

Community · Accepted Answer · 2017-05-23 12:01:37Z

8

You need jQuery (load it before Angular):

"we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case" -- https://groups.google.com/d/msg/angular/H4haaMePJU0/5seG803by5kJ

See also AngularJS: How to make angular load script inside ng-include?

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Dec 30, 2012 at 4:45

Mark Rajcok

365k114 gold badges500 silver badges494 bronze badges

1 Comment

enigment Over a year ago

I'm marking this as correct, with the caveat that there are lighter-weight solutions that may apply in limited cases. Igor points out that to be completely correct, Angular would have to parse and append the HTML before each script tag, create the script, then continue similarly with the rest of the HTML. In some cases though, it's sufficient to insert all the HTML, then locate and run all the script tags embedded in it afterwards, which can be done more simply.

Collectives™ on Stack Overflow

Insert HTML with scripts that should run

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related