Parse html внутри ng-bind с помощью angularJS

У меня проблема с angularJs. Мое приложение запрашивает некоторые данные с сервера, а одно из значений из данных, возвращаемых с сервера, - это строка html. Я связываю его в моем шаблоне angular, как этот

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

но, как вы можете ожидать, я вижу не изображения значков, а разметку в основном материал в div выглядит как

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

что я не хочу.

кто-нибудь знает, что я могу сделать, чтобы разобрать html в transclusion

Ответы

Ответ 1

Вы хотите использовать ng-bind-html и ng-bind-html-unsafe для этой цели.

Примеры показаны здесь

Ответ 2

Так как ng-bind-html-unsafe устарел, вы можете использовать этот код.

Вам нужно создать функцию внутри вашего контроллера:

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

и используйте что-то вроде этого в вашем представлении:

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

Не забудьте ввести $sce:

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

Ответ 3

Лучше использовать $compile вместо ng-bind-html-unsafe.

Смотрите: http://docs.angularjs.org/api/ng.$compile

Наконец, на данный момент последняя версия angularJS (релиз-кандидат 1.2.0) не имеет никакой директивы ng-bind-html-unsafe. Поэтому я действительно рекомендую вам рассмотреть этот вариант перед любым будущим обновлением вашего приложения. (ng-bind-html-unsafe может/не будет работать больше...)

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