AngularJS双花括号符号内呈现HTML

Question

我有包含HTML的JSON变量。

通过执行：{{source.HTML}} Angular显示<和>而不是<和>。

我该怎么做才能让Angular呈现实际的HTML？

更新:
这是我的控制器:

app.controller('objectCtrl', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {

    var productId = ($routeParams.productId || "");

    $http.get(templateSource+'/object?i='+productId)
       .then(function(result) {
          $scope.elsevierObject = {};
          angular.extend($scope,result.data[0]);
        });
  }]);

在我的HTML中，我可以使用：

<div>{{foo.bar.theHTML}}</div>

- Bob van Luijt

---

可能是重复的问题：如何让AngularJS输出转义的HTML。 - Seth

请查看ng-bind-html。 - New Dev

嗨@ Seth，这不是重复的，这个专注于花括号符号表示法。 - Bob van Luijt

Answer 1

你想要“展示”HTML（如<b>Hello</b>）还是“呈现”HTML（如Hello）？

• 如果你想要展示它，花括号就足够了。但是，如果你的 HTML 包含 HTML 实体（如<stuff），你需要手动反转义它，参见这个 SO 问题。

• 如果你想要呈现它，你需要使用 ng-bind-html 指令而不是花括号（顺便说一句，花括号是 ng-bind 指令的快捷方式）。你需要告诉 Angular，注入到该指令中的内容是安全的，使用 $sce.trustAsHtml。

请参见下面的两种情况的示例：

angular.module('test', []).controller('ctrl', function($scope, $sce) {
  $scope.HTML = '<b>Hello</b>';
  
  $scope.trust = $sce.trustAsHtml;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="ctrl">
  <div>Show: {{HTML}}</div>
  <div>Render: <span ng-bind-html="trust(HTML)"></span></div>
</div>

- floribon

---

你的HTML和控制器不同。我没有看到你在哪里设置$scope.foo.bar.theHTML。请注意，我已经更新了我的答案并提供了更多信息。 - floribon

你不能只是使用 <span ng-bind-html="HTML"/> 吗？ - tymtam

你可以这样做。只需确保引用了ngSanitize。 - HaveSpacesuit