$ sce.trustAsHtml并未评估JavaScript字符串（或trustAsJs）; [英] $sce.trustAsHtml is not evaluating a javascript string (or trustAsJs For that matter);

问题描述

 \r \\\
\r\\\
 
\t< / div> \r\\\
\r\\\
\ r \\\ n \\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\'\\\\\\\\ \r\\\
\r\\\
\t< script> \r\\\
\t ...
  

我想用angular将它注入到div中，并让它执行javascript。

第一次尝试： p>

 函数myCtrl（$ sce）{
 $ http.get（endpoint）.then（function（response）{
 $ scope.html = response.data; 
 $ scope.editorHtml = $ sce.trustAsHtml（$ scope.html）; //也试过trustAsJs 
} 
} 
  
 
 
 
 html：
 < div ng-bind -html =editorHtml>< / div> 
  
 html字符串那些标记得到呈现，但纯JavaScript标记不会被评估。我如何获得它来蒸发这些标签？ AngularJS版本1.5.8。感谢！
解决方案 
您的 HTML  id = \'myEditor \。我用 id = \'myEditor \'替换了它，然后... 
 
 
 
检查此 jsfiddle  
添加 angular.min.js 和 angular-sanitize.min.js 到您的项目中。  jquery 2.2.4 。
 
 
 
 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\\\
\r\\\
< div id = \myEditor \name = \myEditor \> \r\\ \\ n \ \\\\\\\\\\\\\\\\\\\\\\\\&&\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ DIV> \r\\\
\r\\\
\r\\\
\r\\\
\r\t; 
 var script =< script type = \text / javascript\> alert（'hi script'）; \r\\\
\r\\\
\t< / +script> \r\\\
\t; 
 $ b myApp.controller（'myCtrl'，['$ sce'，'$ scope'，function（$ sce，$ scope）{
 $ scope.html = data + script; 
 $ scope.editorHtml = $ sce.trustAsHtml（$ scope.html）; 
 $ scope.greeting ='Hola！'; 
}]）; 
  
 
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!
解决方案
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!';
}]);


                        
这篇关于$ sce.trustAsHtml并未评估JavaScript字符串（或trustAsJs）;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！