Angularjs顯示字段爲html

我有一個包含HTML的字段。當我使用{{field}}顯示時，不會呈現html。如何將字段顯示爲呈現的html？ customForm.Description包含HTML：每個請求Angularjs顯示字段爲html

<h4>Work Requests</h4> 
<div ng-repeat="customForms in customFormGroups" class="row"> 
<div ng-repeat="customForm in customForms" class="col-sm-4"> 
    <strong>{{customForm.Name}}</strong> 
    <p>{{customForm.Description}}</p> 
    <div class="form-group"> 
     <a class="btn btn-primary" href="javascript:void(0);" ng-click="selectService(customForm)">Select</a> 
    </div> 
</div> 
</div>

來源

2014-06-27 lascoff

參見：HTTP： //stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – tymeJV

使用$sce服務顯示html。創建一個控制器中的函數將返回信任的html：

$scope.displaySafeHtml = function(html){ 
    return $sce.trustAsHtml(html); 
}

然後使用ng-bind-html與功能：

<p ng-bind-html="displaySafeHtml(customForm.Description)"></p>

Demo

參見：https://docs.angularjs.org/api/ng/service/$sce

來源

2014-06-27 15:12:33 Jerrad

編輯：

這是一個潛在的危險操作。如果你是積極的，你相信文本，沒有人會破解它，你可以注入$ sce服務到你的控制器。

我冒昧（別人的意見），從角文檔複製此實例：

function Ctrl($scope, $sce) { 
    $scope.snippet = 
     '<p style="color:blue">an html\n' + 
     '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + 
     'snippet</p>'; 
    $scope.deliberatelyTrustDangerousSnippet = function() { 
     return $sce.trustAsHtml($scope.snippet); 
    }; 
    }

然後在您的html：

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

我真的強烈建議您閱讀在這裏完整的文檔，並瞭解他們試圖警告你：

https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize

來源

2014-06-27 14:51:49 JSager

你應該解釋它是如何工作的，而不僅僅是簡單地鏈接到資源。 – putvande

等等，認真嗎？該頁面解釋了它的工作原理。它也是角度文檔的一部分，其中有各種動作演示，關於使用它的安全性的多個警告，以及可選指令的列表以使事情更安全或不安全。老實說，我感到震驚的是，人們正在低估這一點，這是一個好得多的答案，比我輸入一個片段並將它留在那裏只是隨意使用而沒有理解。 – JSager

@JSager沒有人會不同意你的評論，但它確實解釋了它，但是作爲一個高質量的答案，今天以及明年當這個鏈接可能消失時，意味着你需要直接給你的答案添加更多的信息。 – lucuma

Angularjs顯示字段爲html

回答

相關問題