ng-bind-html doesn't work with script

Question

I am new to angular js. So this might be very basic question

I have external API data which is a user generated content. The client wants to dynamically show the content. In content, there is script in which directive is created, I tried using ng-bind-html but it doesn't work.

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

want to execute the script in which directive is created and same directive should be injected in html content.

var data = '<script> var app = angular.module(\'main\', []);' +
'app.directive(\'slideImageComparison\', function () {return { restrict:           \'E\', scope: { imageInfo: \'=info\'}, link: function (scope, elem, attr) { console.log(\'directive called\');' +
    '},template: \'<div class="slide-comb"> test </div>\'' +
'}; }); </script>      <slide-image-comparison></slide-image-comparison>';

$scope.myHTML= $sce.trustAsHtml(data)

I added backslash to escape a single quote.

help is appreciated here.

This won't work, due to browser design. <script> tags inserted into HTML are executed on page load; since this content doesn't exist when the page is loaded, it will never be executed. You should look into angular lazy loading techniques instead. — Claies
– Claies, Commented Mar 12, 2017 at 15:13
Also, this script would break your main module if it executed anyway, since it appears to re-declare the main module, instead of adding to it. — Claies
– Claies, Commented Mar 12, 2017 at 15:14
@user3106005 how about using regexp to get the script and eval it? — blackmiaool
– blackmiaool, Commented Mar 12, 2017 at 15:28
sorry I'm new to this, any example would really appreciated. — user3106005
– user3106005, Commented Mar 12, 2017 at 15:29

Community · Accepted Answer · 2017-05-23 12:09:28Z

1

Demo: http://plnkr.co/edit/L8FWxNSQO6VAf5wbJBtF?p=preview

Base on Add directive to module after bootstrap and applying on dynamic content

html:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script src="./app.js"></script>
</head>



<body  ng-app="demo">
  <div ng-controller="mainController">
    <external-html external-data="external"></external-html>
  </div>
</body>

</html>

js:

var module1 = angular.module("demo", []);
module1.controller("mainController", ["$scope", function(sp) {

  var external = `<script> 
  module1.lazyDirective('sl', function () {
      return { restrict:'E', 
              scope: { imageInfo: '=info'}, 
              link: function (scope, elem, attr) { 
                  console.log('directive called');
              },
              template: '<div class="slide-comb"> test </div>'}; 
  }); 
  </script>      
  <sl></sl>`;
  sp.external = external;
}]).config(function($compileProvider) {
  module1.lazyDirective = $compileProvider.directive;
}).directive('externalHtml', ["$parse", "$compile", function($parse, $compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      const data = $parse(attrs.externalData)(scope);
      const el = document.createElement('div');
      el.innerHTML = data;
      const scripts = el.getElementsByTagName("script");
      for (let i in scripts) {
        console.log(scripts[i].textContent)
        eval(scripts[i].textContent);
      }

      element.append($compile(data)(scope));


    }
  }
}]);

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 12, 2017 at 15:34

blackmiaool

5,3942 gold badges24 silver badges40 bronze badges

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

15 Comments

user3106005 Over a year ago

Hi, I tried eval but still its not working :(. is there any way to check whether script is loaded/executed correctly?

blackmiaool Over a year ago

You can console.log() the scripts. BTW, maybe you should use "$compile" to handle the html string.

user3106005 Over a year ago

are you suggesting this way? $scope.myHtml = $compile(data)($scope);

blackmiaool Over a year ago

Nope, u get a element returned by the function, not a html string. You should write a directive for it using "append" things.

blackmiaool Over a year ago

@user3106005 wait for an hour or two, I'd try it myself. It's working time in China now.

|

Collectives™ on Stack Overflow

ng-bind-html doesn't work with script

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related