html - AngularJS 在双花括号表示法中呈现 HTML

Question

我有包含 HTML 的 JSON 变量。

通过做:{{source.HTML}} Angular 正在显示 <和 >而不是 <和 > .

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

更新:
这是我的 Controller :

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>

Answer 1

您要显示 HTML(如<b>Hello</b>)还是呈现 HTML(如Hello)？

• 如果要显示，大括号就够了。但是，如果您拥有的 html 具有 html 实体(如 <stuff )，您需要手动取消转义它，请参阅 this SO question .

• 如果你想渲染它，你需要使用 ng-bind-html指令而不是花括号(仅供引用，它是 ng-bind 指令的快捷方式)。您需要使用 $sce.trustAsHtml 告诉 Angular 注入(inject)该指令的内容是安全的.

请参阅以下两种情况的示例:

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>