2013-02-15 25 views
34

AngularJs ile sorun yaşıyorum. Uygulamam sunucudan bazı veriler talep ediyor ve sunucudan döndürülen verilerden biri de bir html dizesidir. Buayrıştırma html inside ng-bind angularJS kullanarak

<div>{{{item.location_icons}}</div> 

gibi benim açısal şablonuna bağlayıcı ediyorum ama benim gördüğüm simgeler görüntüler değil ama div temelde biçimlendirme şeyler

"<i class='my-icon-class'/>" 

benziyor Tahmin edebileceğiniz gibi hangi istediğim şey değil.

kimse ben ekleme Sen amaç için bu tür ng-bind-html ve ng-bind-html-unsafe kullanmak istediğiniz

cevap

36

yılında html ayrıştırmak için neler yapabileceğini biliyorum.

örnekler daha iyi bir yol $compile yerine ng-bind-html-unsafe kullanmaktır here

+0

bunu ng-bind-html ile nasıl kullanırım? Güvenli olmayan bir şekilde kullanmanın kötü bir yol olduğunu göstermenin bir yolu olarak ng-bind-unsafe-html'yi nasıl kullanabileceğimi görüyorum şeyler yapmak. Ng-bind-html'i detaylandırabilir misiniz? Açısal dokümanlar bu konuda net değil. Kullanmaya çalıştım ve işe yaramadı –

+1

Dürüst olmak gerekirse, tam olarak bilmiyorum. Ama benim anlayışım, dezenfektanın etiketleri 'href', 'src' vb. Gibi harici referanslarla kaldırmasıdır. Eğer kullanıcı girişini bağlarsanız, o zaman güvensiz olabilirsiniz, ama kendi iç değerinize bağlanıyorsunuz. Sanırım sanılmamış versiyonu kullanmak iyi olur. – Tosh

+10

'ng-bind-html' 'ngSanitize' modülündedir, 'ngResource' Angular ile önceden paketlenmemiş. Komut dosyasını eklemeniz ve uygulamanızın buna bağlı olduğundan emin olmanız gerekir: "var app = angular.module ('app', ['ngSanitize']);'. Daha sonra aşağıdaki gibi kullanabileceğiniz 'ng-bind-html' direktifine erişirsiniz:'

' – satchmorun

8

gösterilmiştir.

Bkz: http://docs.angularjs.org/api/ng.$compile

Son olarak, şu anda, angularjs son sürümü (sürüm adayı 1.2.0) Herhangi ng-bind-html-unsafe yönergesi yok. Bu yüzden, uygulamanızın gelecekteki herhangi bir güncellemesinden önce bu seçeneği göz önünde bulundurmanızı gerçekten öneririz. ng-bağlama-html-güvensiz itiraz edildi, bunun yerine bu kodu kullanabilirsiniz gibi

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

+0

[$ sanitize] (http: //docs.angularjs.$ derleme yerine org/api/ngSanitize. $ sanitize)? –

16

(ng-bind-html-unsafe/... artık çalışmıyor olacaktır olabilir).

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

ve görünümde böyle bir şey kullanın::

Sen controller içerisinde işlev oluşturmanız gerekir

<span ng-bind-html='toTrustedHTML(myHTMLstring)'></span> 

$ sce enjekte etmeyi unutmayın:

AppObj.controller('MyController', function($scope, $sce) { 
    //your code here 
});