Angular-Translate를 사용하여 HTML을 포함하는 문자열을 처리하는 방법

Angular-Translate를 사용하여 HTML을 포함하는 문자열을 처리하는 방법

HTML 콘텐츠를 포함하는 문자열을 처리하기 위해 angular와 angular-translate를 구분하는 방법이 있습니까?

있습니다add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>"내 언어 문자열로.템플릿에 글을 써서 사용하는 경우<p>{{'add_card-title' | translate}}</p>나는 있는 그대로의 끈을 얻는다.

출력: To make ordering even quicker, <span class="nowrap">add a card now</span> 예상되는 출력: To make ordering even quicker, add a card now

내가 쓸 수 있어ng-html-bind-unsafe도움이 안 돼요

동작하지 않음:

<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>

그것을 달성할 수 있는 방법이 있나요?

여기 저의 plunker가 있습니다.http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

참고로, 다음의 문제를 참조할 수 있습니다.https://github.com/PascalPrecht/angular-translate/issues/173

주의: 컨트롤러가 그것을 다루도록 하고 싶지 않습니다.

요즘에는 Angle-Translate 2.0을 사용하면 바로 사용할 수 있습니다.

<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p> 

잘 먹히네요.

ng-bind-html 디렉티브는 물결 괄호({ }}) 없이 사용해야 합니다.

이 디렉티브(ngBindHtml)를 사용하기 위해서 필요한 설정을 확인하려면 , 다음의 링크를 참조해 주세요.https://docs.angularjs.org/api/ng/directive/ngBindHtml

ngSanitize를 포함하면 다음 코드가 작동합니다.

<p ng-bind-html="'add_card-title' | translate"></p>

난 이거면 되는데...HTML은 멋진 스타일링으로 해석됩니다(굵은 글씨, 이탤릭체 등).

<p translate="translationId"></p>

다만, 프로바이더 셋업에서 이스케이프 전략을 사용하고 있지 않은지도 확인할 필요가 있었습니다.그게 한동안 나를 혼란스럽게 했어.

• 동작: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
• 아니요: $translateProvider.useSanitizeValueStrategy( 'escape' );

https://angular-translate.github.io/docs/ #/guide/19_security

용도: 각도 변환 v2.13.1

사용할 수 있습니다.<p [innerHTML]="'add_card-title' | translate"></p>

해결책을 찾았습니다.사용하고 있었습니다.AngularJS v1.2.0-rc.3가 있는ng-html-bind-unsafe권장되지 않습니다.이제 angular는ng-bind-html대신ng-html-bind-unsafe하지만 각성제를 주입해야 효과를 볼 수 있다.

교체했습니다.

<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>

와 함께

<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>

일이 잘 풀리기 시작했어요

디폴트로는 각도안전상의 이유로 JS 이스케이프 및 코드 표시. AngularJS 1.2 개발자가 이를 수행하기 전에 탈출하고 싶지 않은 문자열의 각도를 말해야 합니다.ng-bind-html-unsafe단, AngularJS 1.2에서는 사용되지 않습니다.

문자열에서 html 태그를 사용하려면 AngularJS 1.2+에서 다운로드해야 합니다.angular-sanitize를 사용하여 어플리케이션 의존관계에 포함시킵니다.

임의의 문자열에는 html 코드가 포함되어 있습니다.이를 사용하여 표시할 수 있습니다.ng-bind-html$sanitize를 자동으로 사용합니다.이 경우,ng-bind-html="'add_card-title' | translate"

참조용:

중간 크기

AngularJS 매뉴얼

다음은 html을 혼재시키는 많은 방법(스코프 변수와 함께 html 번역에서 ng-click과 같은 것이 필요한 경우의 해석)입니다.

http://plnkr.co/edit/OnR9oA?p=preview

<div>{{'TESTING1_SIMPLE_VAR_REPLACE' | translate: '{name: "John Smith", username: "john.smith12"}'}}</div>
<div translate='TESTING1_SIMPLE_VAR_REPLACE' translate-values='{ name: "Jake Smith", username: "jake-smith-101"  }'></div> 
<div translate="TESTING1_SIMPLE_VAR_REPLACE_NA" translate-value-name="{{name}}" translate-value-username="{{username}}" translate-default="Hello {{name}} ({{username}})"></div>

<br/><br/>
<div>{{'TESTING1_SIMPLEHTML' | translate}}</div><!-- doesn't compile the html -->
<div translate="TESTING1_SIMPLEHTML" translate-default='DEFAULT(not used since there is a translation): This <b>translation</b> has a <a href="http://google.com" target="_blank">link</a>.'></div><!-- this and below compile the html -->
<div translate="TESTING1_SIMPLEHTML_NA" translate-default="DEFAULT(used since translation not available): This <b>translation</b> has a <a href='http://google.com' target='_blank'>link</a>."></div>
Uses ng-bind-html and sanitize: <div ng-bind-html="'TESTING1_SIMPLEHTML' | translate"></div>


<br/><br/>
<div translate="TESTING2_SCOPE" translate-values="{timer: timer}" translate-default="DEFAULT(not used since there is a translation): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>
<div translate="TESTING2_SCOPE" translate-value-timer="{{timer}}"></div>
<div translate="TESTING2_SCOPE_NA" translate-default="DEFAULT(used since translation not available): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>

<br/><br/>
<div compile-unsafe="'TESTING3_COMPILE' | translate"></div><!-- old way to do before angular 2.0-->
<div translate="TESTING3_COMPILE" translate-compile></div>
<div translate="{{'TESTING3_COMPILE_SCOPE'}}" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> <!-- not sure of advantage of this style, but saw an example of it -->
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> 
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-values='{ name: "Jake Smith", username: "jake-smith-101"  }' ></div>

"lng_pageFooter" : "Copyright © • 2018 • My Company • Powered by <a href=\"http://www.mycompany.com\">My Company™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}])
....
<span ng-bind-html="'lng_pageFooter' | translate | trusted"></span>

두 가지 답변을 모두 시도했지만 모두 1.0.7에서 작동하지 않았습니다. 1.2 이전 버전을 사용하는 모든 사용자에게는 다음과 같이 할 수 있습니다.

<p ng-html-bind-unsafe="'add_card_title' | translate"></p>

innerHtml을 사용하면 . ★<p [innerHtml]="'lorem.ipsum' | translate"></p>

언급URL : https://stackoverflow.com/questions/19754381/how-to-handle-strings-containing-html-using-angular-translate