如何通過AngularJS模板輸出html？

Question

<h1>{{ revision.title }}</h1> 

<div ng-bind-html="revision.content"></div> 

標題輸出不錯，但內容 - 沒有。它有它的一些html和我得到以下錯誤：Attempting to use an unsafe value in a safe context.它被描述爲這樣：http://docs.angularjs.org/error/ $ SCE：不安全的，這很好，但後來我怎麼能輸出的內容，將有它的一些HTML，所以我必須將其設置爲{{ revision.content | safe }}或smthn。什麼是正確的方法？

編輯：

AngularJS版本：1.2

Answer 1

所以解決方法是這樣的：

包括http://code.angularjs.org/angular-sanitize.min.js，包括它的模塊中：

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

，然後你可以自由地使用ng-bind-html

Answer 2

什麼版本您使用的？ 如果使用低於1.2，你可以嘗試ngBindHtmlUnsafe

Answer 3

我創建了一個ng-html指令，這是否ng-bind-html-unsafe用來做同樣的基本的東西。不過，我強烈建議你只能謹慎使用它。它可以很容易地打開您的網站直到惡意攻擊。所以，知道自己在做什麼，你實現它之前：

.directive('ngHtml', ['$compile', function($compile) { 
    return function(scope, elem, attrs) { 
     if(attrs.ngHtml){ 
      elem.html(scope.$eval(attrs.ngHtml)); 
      $compile(elem.contents())(scope); 
     } 
     scope.$watch(attrs.ngHtml, function(newValue, oldValue) { 
      if (newValue && newValue !== oldValue) { 
       elem.html(newValue); 
       $compile(elem.contents())(scope); 
      } 
     }); 
    }; 
}]); 

然後您可以使用它作爲：

<div ng-html="revision.content"></div> 

希望有所幫助。

Answer 4

我知道這是一個老的問題，但你也可以信任你的控制器使用$sce值：

$scope.revision.content = $sce.trustAsHtml($scope.revision.content); 

之後，ng-bind-html會工作。根據Official AngularJs Doc about ngBindHtml你必須注入ngSanitize到您的應用程序依賴

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

然後你就可以有辦法安裝ngSanitize模塊

Answer 5

：

1 - 使用涼亭

bower install --save angular-sanitize 

2 - 使用NPM

npm install --save angular-sanitize 

3 - 手動下載從code.angularjs.org path which include all angularJs files categories by version numberangular-sanitize.js文件中像@Xeen answer

查看更多有關從Oficial angularJs github repository for install angular-sanitize