2012-07-10 34 views
17

Tôi đang sử dụng AngularJS với dịch vụ bên thứ ba tạo ra phản hồi html. Tôi muốn sử dụng ng-repeat để trả về các câu trả lời HTML như một danh sách, tuy nhiên Angular làm cho nó trở thành văn bản.AngularJS - Có thể sử dụng ng-repeat để hiển thị các giá trị HTML không?

Có thể sử dụng ng-repeat để hiển thị thuộc tính HTML không?

Tôi đã tạo jsFiddle này để chứng minh sự cố của mình. http://jsfiddle.net/DrtNc/1/

+1

Đối với những người bạn đang xem câu hỏi này ngay bây giờ, hãy xem nhận xét hàng đầu về tài liệu cho [ngBindHtml] (http://docs.angularjs.org/api/ng.directive:ngBindHtml). Điều đó làm việc cho tôi trong khi những câu trả lời này thì không. –

Trả lời

19

Tôi nghĩ rằng việc sử dụng ng-bind-html-unsafe sẽ giúp bạn có được những gì bạn cần.

<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div> 

Dưới đây là một fiddle làm việc: http://jsfiddle.net/nfreitas/aHfAp/

Tài liệu cho các chỉ thị có thể được tìm thấy ở đây: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

+0

tuyệt vời, nghĩa là nó –

+1

điều gì sẽ xảy ra nếu tôi muốn có chỉ thị tùy chỉnh được sử dụng trong item.html? – test30

+4

Đây là một vài năm tuổi - chỉ muốn thông báo cho lưu lượng truy cập mới rằng phương pháp này đã không được chấp nhận. Đây là một cách hay để thực hiện: http: : //stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html –

2

item.html sẽ luôn được hiểu là văn bản. bạn phải chuyển đổi nó thành html một cách rõ ràng. click here

Tôi đã thêm hàm render sẽ chuyển đổi từng chuỗi thành html.

+0

Rất tuyệt! cảm ơn sự giúp đỡ –

+0

bạn được chào đón :) – Kishore

+3

mmm ... Tôi nghĩ đã quá sớm để ăn mừng. giải pháp của bạn hiển thị innerHTML, những gì tôi thực sự cần là hiển thị toàn bộ HTML. xem cập nhật của tôi: http: //jsfiddle.net/DrtNc/4/ –

16

Con đường tôi đạt được điều này là do ng-bind-html bên trong ng-repeat;

<div ng-repeat="comment in comments"> 
    <div ng-bind-html="comment.content"></div> 
</div> 

Hy vọng điều này sẽ giúp ai đó!

+0

Đừng quên sử dụng $ sce cho phần tử html bạn muốn tiêm. Xem: http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html – suhendri

+0

tính năng này không hoạt động đối với tôi – Xsmael

Các vấn đề liên quan