AngularJS: привязать строку html с пользовательским стилем

Я хочу связать строку html с пользовательским стилем для DOM. Однако ngSanitize удаляет стиль из строки.

Например:

В контроллере:

$scope.htmlString = "<span style='color: #89a000'>123</span>!";

И в DOM:

<div data-ng-bind-html="htmlString"></div>

Опустите атрибут стиля. Результат будет выглядеть следующим образом:

<div data-ng-bind-html="htmlString"><span>123</span>!</div>

Вместо:

<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>

Вопрос: Как я могу это достичь?

Ответы

Ответ 1

Как уже упоминалось @Beyers, вы должны использовать $sce.trustAsHtml(), чтобы использовать его непосредственно в DOM, вы можете сделать это вот так: часть JS/controller:

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

И в части DOM/HTML

<div data-ng-bind-html="trustAsHtml(htmlString)"></div>

Ответ 2

Как насчет настраиваемого фильтра angular? Это работает в 1.3.20

angular.module('app.filters')
    .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })

Используйте его как <div ng-bind-html="model.content | trusted"></div>

Ответ 3

Если вы доверяете html, вы можете использовать $sce.trustAsHtml, чтобы явно доверять html. Быстрый пример:

В контроллере (не забудьте ввести $sce в контроллер):

$scope.htmlString = $sce.trustAsHtml("<span style='color: #89a000'>123</span>!");

И в DOM, так же, как и у вас:

<div data-ng-bind-html="htmlString"></div>

Ответ 4

Вы должны создать свою собственную директиву, которая будет иметь html как template или ссылаться на нее с помощью templateUrl. Внутри html вы можете использовать ng-style, чтобы добавить объект в свой стиль.

Вот пример: http://jsfiddle.net/tomepejo/5AsQE/