신뢰할 수있는 HTML에 {{{}}} 구문을 사용하는 방법은 무엇입니까?

핸들 막대의 {{expression}} 양식 {{{expression}}} 양식이 반환하지 않는 동안 HTML 이스케이프 값이 반환됩니다. 이 기능을 AngualarJS 템플릿에 추가 할 수있는 방법이 있습니까? 그렇다면 정기적으로 새 니타 이징 된 출력에 {{expression}}을 사용하고 신뢰할 수있는 이스케이프 처리되지 않은 HTML 표현식에 {{{expression}}}을 사용할 수 있습니까?신뢰할 수있는 HTML에 {{{}}} 구문을 사용하는 방법은 무엇입니까?

그런데 나는 ng-bind-html 지시어에 익숙합니다.

출처

2015-02-07 PHPst

당신이 원하는 무엇의 예를 제공 할 수있는 사실은 $sce.trustAsHtml을 위의 필터 방식을 재사용? 귀하의 질문은 다소 모호합니다. – JLRishe

이론적으로 (나는 이것을 시도하지 않았고 내 시간은 지금 내가 그것을 할 수 없었을 것입니다.) 하나는 변화시킬 수 있었고, Angular의 템플릿 모델은 그러한 것을 허용 할 수있었습니다. 즉, 나는 개인적으로 템플릿의 이스케이프 처리되지 않은 HTML이 예외적 인 사례라고 생각합니다. 이는 조심스럽게 사용해야하며 특별한주의를 기울여야합니다. –

응답 : 짧은 대답은 아니오입니다. 나는 결코 그런 구성을 보지 못했습니다. {{{}}}을 각도로 사용할 수 없습니다.

유용한 해결 방법 : ng-bind-html 지시어를 사용하지 않고 범위를 통해 이스케이프 처리되지 않은 HTML 또는 초기화되지 않은 HTML을 뷰로 가져올 수 없습니다. 당신은 당신의 컨트롤러에 도우미 함수 중 하나를 추가하거나 좀 더 쉽게 NG 바인드-HTML (Plunk here)를 사용할 수 있도록 수있는 필터를 추가,하지만 당신은 여전히 NG 바인드 HTML이 필요한 것으로 보인다 수 :

var app = angular.module('plunker', ['ngSanitize']); 

app.controller('MyController', function($scope, $sce) { 
    $scope.someHtmlContent = "Label: <input name='test'>"; 

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

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

을

그런 다음 당신은 다음과 같이 사용합니다 :

<body ng-controller="MyController"> 
    <div ng-bind-html="someHtmlContent | trustAsHtml"> 
    </div> 

    <div ng-bind-html="h(someHtmlContent)"> 
    </div> 
</body>

출처

2015-02-07 16:35:44

나는 대답에서 그 요점을 얻지 못했다. – PHPst

@PHPst 대답은 "아니오"입니다. 당신이 원하는 것을 할 수는 없습니다. 대답의 나머지 부분은 필터 나 도우미 함수를 사용하여 이스케이프 처리되지 않은 HTML을 뷰에 넣는 데 필요한 ng-bind-html 지시문을 약간 더 쉽게 사용할 수있는 방법을 보여줍니다. ng-bind-html이 필요합니다. –

"... 또는 사용하기가 좀 더 쉬울 수도있는 필터를 추가하십시오."어떻게 더 쉽게 될 수 있습니까? 더 지저분 해 보입니다. – PHPst

-1

당신이 정말로 {{{}}}를 사용하려는 경우, 그것은 가능하다 :

var myApp = angular.module('myApp', [], function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{{{'); 
    $interpolateProvider.endSymbol('}}}'); 
});

가 그렇게 할 수 없습니다 그러나 단지 FO r 신뢰할 수있는 html. 모든 구획 문자가 변경됩니다.

출처

2015-02-16 23:55:59 jlouazel

이것은 약간의 질문에 대답하는 것 같지만,이 질문은 아닙니다. –

이 정말 불필요한 문제이며, 무엇을 다음과 것은 더욱 불필요한 솔루션입니다 :) 그러나 단지 재미를 위해, 당신은 다음과 같은 일을 할 수있는 : HTML을 구문 분석하고 ng-bind-html와 {{{ 및 }}}의 발견 된 모든 인스턴스를 교체 .

app.directive("trust", function($compile){ 
    return { 
    terminal: true, 
    priority: 4000, 
    link: function(scope, elem){ 
     var html = elem.html(); 
     var re = /({{{)([^}]+)(}}})/g; 
     var newHtml = html.replace(re, '<span ng-bind-html="$2 | trustAsHtml"></span>'); 
     elem.html(newHtml); 
     elem.removeAttr("trust"); 
     $compile(elem)(scope); 
    } 
    }; 
}) 
.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

사용법은 다음과 같습니다 :

<div trust> 
    {{{html()}}} 
    <div> 
    {{{foo}}} 
    </div> 
</div>

plunker

출처

2015-02-17 01:16:44

신뢰할 수있는 HTML에 {{{}}} 구문을 사용하는 방법은 무엇입니까?

답변

관련 문제