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.

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, Mar 12 '17 at 15:14
@user3106005 how about using regexp to get the script and eval it? — blackmiaool, Mar 12 '17 at 15:28
sorry I'm new to this, any example would really appreciated. — user3106005, Mar 12 '17 at 15:29
Claies, you said that script would break your 'main' module, can we define separate module and link that module in main module. — user3106005, Mar 13 '17 at 12:50

score 1 · Accepted Answer · edited May 23 '17 at 12:09

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 '17 at 12:09

Community

1
1

answered Mar 12 '17 at 15:34

blackmiaool

5,234
2
22
39

Hi, I tried eval but still its not working :(. is there any way to check whether script is loaded/executed correctly? – user3106005 Mar 13 '17 at 02:58
You can console.log() the scripts. BTW, maybe you should use "$compile" to handle the html string. – blackmiaool Mar 13 '17 at 03:01
are you suggesting this way? $scope.myHtml = $compile(data)($scope); – user3106005 Mar 13 '17 at 03:08
Nope, u get a element returned by the function, not a html string. You should write a directive for it using "append" things. – blackmiaool Mar 13 '17 at 03:20
@user3106005 wait for an hour or two, I'd try it myself. It's working time in China now. – blackmiaool Mar 13 '17 at 03:33
Thanks, working example will really help, meantime will also try by another way. – user3106005 Mar 13 '17 at 05:42
@user3106005 What do u think about it? – blackmiaool Mar 13 '17 at 07:14
Thanks, its working. I tried to move 'sl' directive in new file e.g. externaldir.js, and then I added below code, var anotherScript = ' '; $scope.external = anotherScript; but its not working, am I missing something? – user3106005 Mar 13 '17 at 08:36
Well... it's different from your original code. The script in your original code is "inline js", and the script above is "js link". If u do so, u should get the script by hand (with ajax's "get" method and eval it or inserting a script tap like they did in "require.js"). You'd better read the demo code first. I believe that if you understant the meaning of it, u can find the correct way to solve it. – blackmiaool Mar 13 '17 at 09:10
Thanks for update. I have gone through the demo code, In my case, external content could be inline.js or it could be js link, or just plan html tag. so I'm trying to implement generic solution. – user3106005 Mar 13 '17 at 09:20
To load the javascript link in html, I did this, $document.ready(function () { var fileref=$document[0].createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", 'external.js'); $document[0].getElementsByTagName("head")[0].appendChild(fileref) }); – user3106005 Mar 13 '17 at 12:42
and in external.js file, I moved below directive code. var app1 = angular.module('anothermodule', []); app1.directive('sl', function () { return { restrict:'E', scope: { imageInfo: '=info'}, link: function (scope, elem, attr) { console.log('directive called'); },template: '
test
' };}); here script get loaded but directive defined in above script not getting executed, it seems that, module i.e. 'anothermodule' that I defined in external.js file not getting link with main module. not sure whether its causing not loading directive correctly for js link. – user3106005 Mar 13 '17 at 12:44
can anyone help how to load external java script run time and use directive defined in external .js file, here module defined in external.js could be different than main module. – user3106005 Mar 13 '17 at 12:47
@user3106005 http://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically u should notice that u can't register an angular module in an angular module http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs – blackmiaool Mar 13 '17 at 12:51
yes, seems can't register an angular module in an angular module, is there any other way where i can link external js file, use directive defined in that external file? – user3106005 Mar 14 '17 at 09:06

ng-bind-html doesn't work with script

1 Answers1

Linked