Làm cách nào để xuất html thông qua mẫu AngularJS?

Question

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

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

Tiêu đề đầu ra tốt, nhưng nội dung thì không. Nó có một số html trong đó và tôi nhận được lỗi sau: Attempting to use an unsafe value in a safe context. được mô tả như vậy: http://docs.angularjs.org/error/ $ sce: không an toàn và điều đó là tốt, nhưng sau đó làm cách nào tôi có thể xuất nội dung vì sẽ có một số html trong đó và vì vậy tôi phải đặt nó thành {{ revision.content | safe }} hoặc smthn. Cách chính xác là gì?

EDIT:

AngularJS phiên bản: 1.2

Answer 1

Vì vậy, việc sửa chữa là:

bao gồm angular-sanitize.min.js từ http://code.angularjs.org/ và bao gồm nó trong module của bạn:

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

và sau đó bạn đang miễn phí để sử dụng ng-bind-html

Answer 2

Phiên bản nào bạn đang sử dụng? Nếu bạn đang sử dụng ít hơn 1.2 bạn có thể thử ngBindHtmlUnsafe

Answer 3

Tôi tạo ra một chỉ thị ng-html rằng làm điều cơ bản giống nhau mà ng-bind-html-unsafe sử dụng để làm. Tuy nhiên, tôi đặc biệt khuyên bạn chỉ nên sử dụng nó một cách thận trọng. Nó có thể dễ dàng mở trang web của bạn đến các cuộc tấn công nguy hiểm. Vì vậy, biết những gì bạn đang làm trước khi bạn thực hiện nó:

.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); 
      } 
     }); 
    }; 
}]); 

Và sau đó bạn sẽ sử dụng nó như:

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

Hy vọng rằng sẽ giúp.

Answer 4

Tôi biết đó là một cũ câu hỏi, nhưng bạn cũng có thể tin tưởng giá trị bằng cách sử dụng $sce trong bộ điều khiển của mình:

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

Sau đó, ng-bind-html sẽ hoạt động.

Answer 5

theo Official AngularJs Doc about ngBindHtml bạn phải tiêm ngSanitize vào phụ thuộc ứng dụng của bạn

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.

Sau đó, bạn có thể cài đặt ngSanitize module có cách:

1 - sử dụng Chòi chơi cho

bower install --save angular-sanitize 

2 - sử dụng npm

npm install --save angular-sanitize 

3 - bằng tay bằng cách tải tập tin từ angular-sanitize.jscode.angularjs.org path which include all angularJs files categories by version number như @Xeen answer

Xem Thông tin thêm về cài đặt ngSanitize mô-đun từ Oficial angularJs github repository for install angular-sanitize