AngularJS用双花括号表示法呈现HTML

  • Z时代
  • 2024-01-10
  • 分类：问答

我有包含HTML的JSON变量。

这样做：{{source.HTML}}显示Angular &lt;而&gt;不是<和>。

如何使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>

回答：

您要 显示 HTML（例如<b>Hello</b>）还是 渲染 HTML（例如 ）？

  • 如果要显示它，大括号就足够了。但是，如果您拥有的html具有html实体（如&lt;stuff），则需要手动对其进行转义。

  • 如果要渲染它，则需要使用ng-bind-html指令而不是使用方括号（FYI，是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>

以上是 AngularJS用双花括号表示法呈现HTML 的全部内容， 来源链接： utcz.com/qa/406971.html

回到顶部