AngularJS使用雙括號表示法呈現HTML

通過這樣做：{{source.HTML}} Angular顯示<和>而不是<和>。

我該怎麼做Angular呈現實際的HTML？

UPDATE：
這是我的控制器：

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>

來源

2015-02-11 Bob van Luijt

可能重複[如何擁有AngularJS輸出轉義HTML（http://stackoverflow.com/questions/20436579/how-to-have-angularjs-output-escaped-html） – Seth 2015-02-11 01:00:13

看看['ng-bind-html']（https://docs.angularjs.org/api/ng/directive/ngBindHtml） – 2015-02-11 01:04:33

Hi @Seth它不是重複的，這個重點放在花括號上。 – 2015-02-11 01:08:51

你想顯示的HTML （如<b>Hello</b>）或渲染的HTML（如你好）？

如果你想顯示它，大括號就足夠了。但是，如果您擁有html實體（如<stuff），則需要手動忽略它，請參閱this SO question。
如果你想渲染它，你需要使用ng-bind-html指令來代替curcly括號（這是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>

的

來源

2015-02-11 01:05:17 floribon

你的html和控制器是不同的。我沒有看到你設置了'$ scope.foo.bar.theHTML'。請注意，我已更新我的答案，更多信息 – floribon 2015-02-11 01:19:20

aha，檢查，謝謝！ – 2015-02-11 01:22:43

難道你不能只使用？ – mayu 2016-08-03 03:47:30

AngularJS使用雙括號表示法呈現HTML

回答

相關問題