Angular-Translate를 사용하여 HTML이 포함 된 문자열을 처리하는 방법은 무엇입니까?

Angular-Translate를 사용하여 HTML이 포함 된 문자열을 처리하는 방법은 무엇입니까?

---

angular 및 angular-translate 에 HTML 콘텐츠가 포함 된 문자열을 처리하도록 지시하는 방법이 있습니까?

나는 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>

그것을 달성하는 방법이 있습니까?

내 플 런커는 다음과 같습니다. http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

참고로이 문제를 볼 수 있습니다 : https://github.com/PascalPrecht/angular-translate/issues/173

참고 : 컨트롤러를 초대하여 처리하고 싶지 않습니다.

---

요즘 angular-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

사용 : angular-translate v2.13.1

---

당신이 사용할 수있는 <p [innerHTML]="'add_card-title' | translate"></p>

---

해결책을 찾았습니다. 내가 사용하고 AngularJS v1.2.0-rc.3있어시킨 ng-html-bind-unsafe되지 않습니다. 이제 각도 ng-bind-html대신 ng-html-bind-unsafe. 그러나 작동을 위해서는 angular-sanitize 를 의존성으로 주입 해야합니다.

나는 교체했다

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

와

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

일이 시작되었습니다.

---

다음은 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>

---

기본적으로 AngularJS 이스케이프 및 코드는 안전상의 이유로 표시하므로, AngularJS 1.2 개발자가 사용하여이를 수행 할 수 있기 이전 ng-bind-html-unsafe에는 더 이상 사용되지 않는 AngularJS 1.2에서 이스케이프하지 않으려는 문자열의 각도를 알려야 합니다.

To use html tags in strings, in AngularJS 1.2+, you need to download angular-sanitize module and include it in your application dependencies.

Any string contains html code you can display it by using ng-bind-html Automatically uses $sanitize, in your case it will be ng-bind-html="'add_card-title' | translate"

For reference:

On Medium

AngularJS Documentation

---

"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>

---

I tried both your answers and none of them worked on 1.0.7 so for everyone that's working pre 1.2 you can do it like this

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

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