允許角廣場brakets內的HTML渲染

Question

假設我有HTML和Javascript代碼：

$scope.test = "hello<br/>world"; 
<div>{{ test }}</div> 

角將明顯呈現爲：

<div>hello<br/>world</div> 

而這正是它應該是怎樣工作，但是，如果我希望它實際上將其呈現爲HTML標記而不是文本？

我知道這可能會導致安全問題，但我只是想知道出於好奇。

在此先感謝。

Answer 1

的建議here您可以創建一個過濾器：

HTML：

<div ng-controller="MyCtrl"> 
    <div ng-bind-html="my_html | to_trusted"></div> 
</div> 

這是你的JavaScript將如何顯示：

var myApp = angular.module('myApp',[]); 

angular.module('myApp') 
    .filter('to_trusted', ['$sce', function($sce){ 
     return function(text) { 
      return $sce.trustAsHtml(text); 
     }; 
    }]); 

function MyCtrl($scope) { 

    $scope.my_html = '<div>hello<br/>world</div>'; 
} 

Answer 2

您可以在AngularJS中使用ng-bind-html指令。

<div ng-controller="ngBindHtmlCtrl"> 
<p ng-bind-html="trustedHtml"></p> 
</div> 

其中

$scope.myHTML = "I am an <code>HTML</code>string with <a href="#">links!</a>" 

將相應地呈現。

對於參與這一安全問題，你通過HTML內容到你的範圍變數MYHTML前，用消毒它：

$scope.trustedHtml = $sce.trustAsHtml($scope.html); 

，然後使用$ scope.trustedHtml在NG綁定，HTML指令如上所列。