Question

我的服务器有一个返回html / js字符串的json端点，看起来类似于：

"\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..."

我想将这个带有角度注入div，并让它执行javascript。

首次尝试：

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>

我注意到如果我返回一个纯HTML字符串，那些标签就会被渲染，但是纯粹的javascript标签不会被评估。如何让它来评估这些标签？ AngularJS版本1.5.8。谢谢！

Answer 1

您的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\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!';
}]);

Answer 2

你必须包含jQuery才能工作。也不要忘记ngSanitize。

Plunker

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

$ sce.trustAsHtml没有评估javascript字符串（或者trustAsJs）;

2 个答案: