current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
2

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 javascript it sends me. I do trust the server, I'm aware of the risks, and this is a very specialized situation.)

share|improve this question
    
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 Dec 4 '12 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 Dec 4 '12 at 22:24

2 Answers 2

up vote 5 down vote accepted

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?

share|improve this answer
    
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. –  enigment Dec 30 '12 at 17:46
up vote 2 down vote

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>
share|improve this answer
1  
using a directive based solution similar to this has worked for me –  yash Sep 6 '14 at 6:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.