2013-02-15 15 views
34

Mam problem z angularJs. Moja aplikacja żąda pewnych danych z serwera, a jedna z wartości danych zwróconych z serwera jest łańcuchem html. Jestem wiązania go w moim kątowej szablonu jak tenparsować html wewnątrz ng-bind przy użyciu angularJS

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

ale jak można się spodziewać, co widzę nie jest obrazy ikony ale markup zasadzie rzeczy w div wygląda

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

który nie jest tym, czego chcę.

ktoś wie co mogę zrobić, aby analizować html w transkluzji

Odpowiedz

36

Chcesz użyć ng-bind-html i ng-bind-html-unsafe do tego rodzaju celów.

przykłady przedstawiono here

+0

jak tego używać z ng-bind-html Widzę, jak mogę użyć ng-bind-unsafe-html nie jestem pewien, czy niebezpieczne jest sposób sugerowania, że ​​jest to zły sposób robiąc rzeczy. Czy możesz rozwinąć w ng-bind-html? Kanciaste dokumenty nie są zbyt jasne. Próbowałem go używać i nie działało. –

+1

Szczerze mówiąc, nie wiem dokładnie. Ale rozumiem, że odkażacz usunie znaczniki z dowolnymi odnośnikami zewnętrznymi, takimi jak 'href',' src', etc ... Jeśli wiążesz dane wprowadzane przez użytkownika, może to być niebezpieczne, ale wiążesz się z własną wartością wewnętrzną , Myślę, że dobrze jest używać wersji nieoczyszczonej. – Tosh

+10

'ng-bind-html' jest w module' ngSanitize', który podobnie jak 'ngResource' nie jest wstępnie zapakowany z Angular. Musisz uwzględnić skrypt i upewnić się, że aplikacja jest od niego zależna: 'var app = angular.module ('app', ['ngSanitize']);'. Będziesz wtedy miał dostęp do dyrektywy 'ng-bind-html', której możesz użyć w następujący sposób:'

' – satchmorun

8

Lepszym sposobem jest użycie $compile zamiast ng-bind-html-unsafe.

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

Wreszcie, w tej chwili, ostatnia wersja angularjs (release candidate 1.2.0) nie mają żadnego dyrektywę ng-bind-html-unsafe. Dlatego naprawdę zachęcam do rozważenia tej opcji przed każdą przyszłą aktualizacją aplikacji. (ng-bind-html-unsafe może/nie będą pracować dłużej ...)

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

+0

Nie masz na myśli [$ sanitize] (http: //docs.angularjs.org/api/ngSanitize. $ sanitize) zamiast kompilacji $? –

16

Jak ng-bind-html-niebezpieczna jest przestarzała, można użyć zamiast tego kodu.

Musisz utworzyć funkcję wewnątrz kontrolera:

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

i użyć czegoś takiego w widoku:

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

Nie zapomnij wstrzykiwać $ SCE:

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