CODEWITHSUNDEEP
javascripthtmlangularjs
John Doe
John Doe

Reputation: 215

$sce.trustAsHtml is not evaluating a javascript string (or trustAsJs For that matter);

My server has a json endpoint that returns a html/js string, looks similar to such:

"\r\n\r\n<div id=\'myEditor\" name=\"myEditor\">\r\n\r\n\t\t<a href=\"http://example.com\"></a>\r\n\t</div>\r\n\r\n\r\n\r\n\r\t<script type=\"text/javascript\" src=\"/MyEditor/WebResource.axd?...\:">\r\n\r\n\t<script>\r\n\t..."

I want to inject this with angular into a div, and have it execute the javascript as well.

First attempt:

function myCtrl ($sce) {
  $http.get(endpoint).then(function (response) { 
    $scope.html = response.data;
    $scope.editorHtml = $sce.trustAsHtml($scope.html); //also tried trustAsJs
   }
}

html:

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

I noticed that if I return a pure html string those tags get rendered, however a pure javascript tags do NOT get evaluated. How do I get it to evaulate these tags? AngularJS version 1.5.8. Thanks!

Upvotes: 0

Views: 732

Answers (2)

Shadmehr
Shadmehr

Reputation: 278

Your HTML has some syntax problem such id=\'myEditor\". I replaced it with id=\'myEditor\' and so ...

Check this jsfiddle Add angular.min.js and angular-sanitize.min.js to your project. I used jquery 2.2.4 for this sample.

HTML:

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <h2>{{html}}</h2>
    <span>{{greeting}}</span>
    <div ng-bind-html="editorHtml"></div>
  </div>
</div>

JS:

var myApp = angular.module('myApp', ['ngSanitize']);

var data = "\r\n\r\n<div id=\"myEditor\" name=\"myEditor\">\r\n\r\n\t\t<a href=\"http://example.com\">hi html</a>\r\n\t</div>\r\n\r\n\r\n\r\n\r\t";
var script = "<script type=\"text/javascript\"> alert('hi script');\r\n\r\n\t</" + "script>\r\n\t";

myApp.controller('myCtrl', ['$sce', '$scope' , function($sce, $scope) {
  $scope.html = data + script;
  $scope.editorHtml = $sce.trustAsHtml($scope.html);
  $scope.greeting = 'Hola!';
}]);

Upvotes: 2

digit
digit

Reputation: 4565

You have to include jQuery for this to work. Also don't forget ngSanitize.

Plunker

http://plnkr.co/edit/zEXXCB459Tp25VJiyyZb?p=preview

Upvotes: 0

Related Questions