HTML 문자열을 사용자 정의 스타일과 바인딩

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>

질문:어떻게 하면 좋을까요?

@Beyers에서 이미 언급했듯이$sce.trustAsHtml()를 DOM 에 직접 사용하려면 , JS/컨트롤러 부품으로서 다음과 같이 할 수 있습니다.

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

그리고 DOM/HTML 부분에서는

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

커스텀 앵글 필터는?이것은 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>

html을 신뢰하는 경우 를 사용하여 html을 명시적으로 신뢰할 수 있습니다.간단한 예:

컨트롤러(컨트롤러에 $sce를 삽입하는 것을 잊지 마십시오):

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

그리고 DOM에서 당신이 가지고 있던 것과 같은:

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

html이 다음과 같은 사용자 지정 디렉티브를 작성해야 합니다.template또는 참조할 수templateUrl. html 내에서 ng-style을 사용하여 오브젝트를 스타일로 추가할 수 있습니다.

다음은 예를 제시하겠습니다.http://jsfiddle.net/tomepejo/5AsQE/

textAngular, couse ngSanitize 화이트리스트는 유연하지 않습니다(자세한 내용은 이 문제를 참조하십시오.https://github.com/angular/angular.js/issues/5900)

언급URL : https://stackoverflow.com/questions/21503588/bind-html-string-with-custom-style