0

Hi I'm trying to pass a javascript code through angular scope but on view page it renders as text. I also tried ng-Sanitize but it also didn't work.

<div id="xv-embed-13042533"></div> <script type="text/javascript"> (function() { var tn = document.createElement('script'); tn.type = 'text/javascript'; tn.async = true; tn.src = 'http://flashservice.example.com/embedcode/13042533/510/400/embed.js'; var s = document.getElementById('xv-embed-13042533'); s.parentNode.insertBefore(tn, s); })(); </script>

But on View page it renders as text in below format

<div id="xv-embed-13042533"></div> <script type="text/javascript"> (function() { var tn = document.createElement('script'); tn.type = 'text/javascript'; tn.async = true; tn.src = 'http://flashservice.example.com/embedcode/13042533/510/400/embed.js'; var s = document.getElementById('xv-embed-13042533'); s.parentNode.insertBefore(tn, s); })(); </script>

I'm using below syntax 

<div id="Div2" ng-bind-html="htmltext2"></div> <br/>


too honest for this site
  • 12,050
  • 4
  • 30
  • 52
rahlrokks
  • 451
  • 1
  • 4
  • 12

1 Answers1

0

You should use $sce.trustAsHtml

$scope.unsafeHtml = $sce.trustAsHtml('<script>...<\/script>');

in conjunction with ng-bind-html

<div ng-bind-html="unsafeHtml"></div>

However, the above will not work, because jqLite doesn't handle <script> correctly. You have to resort to such workaround or load jQuery before Angular, so jQuery would be used as angular.element instead of jqLite.

Here's an example.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • I have already created "sanitize" filter but that's not working – rahlrokks Jul 25 '15 at 11:51
  • You didn't provide fully testable example. Here's a working one, it does exactly the same as the answer says http://plnkr.co/edit/iVre7ZZuBPZvY6XJcOvh?p=preview – Estus Flask Jul 26 '15 at 06:33