Wie behandelt man Strings mit HTML mit Angular-Translate?

Gibt es eine Möglichkeit zu sagen, kantig und angular-translate Behandlung von strings, die HTML enthält Inhalte.

Habe ich add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>" als meine Lang-string. Wenn ich es in meinem template schreiben <p>{{'add_card-title' | translate}}</p> bekomme ich Strings wie es ist.

Ausgabe: To make ordering even quicker, <span class="nowrap">add a card now</span>
erwartete Ausgabe: To make ordering even quicker, add a card now

Ich weiß, dass ich verwenden können ng-html-bind-unsafe aber es ist nicht zu helfen.

Nicht funktioniert:

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

Gibt es eine Möglichkeit, es zu erreichen?

Hier ist mein plunker: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

Als Referenz können Sie sehen, dieses Problem: https://github.com/PascalPrecht/angular-translate/issues/173

Hinweis: ich will nicht invlove-controller zu behandeln.

Kommentar zu dem Problem - Öffnen
wenn die Richtlinie Entwickler, die kennen Ihren code vorschlagen, mit einer Richtlinie...warum würde das nicht funktionieren? Würde tatsächlich eine Menge aus Ihrem aktuellen markup, vereinfachen Sie Ihre Vorlagen Erstellung Kommentarautor: charlietfl
ng-html-bind-unsicher ist veraltet, das ist, warum es nicht funktioniert. Kommentarautor: waqas
@charlietfl kann Sie Punkt dem Vorschlag der Richtlinie? Kommentarautor: epeleg

InformationsquelleAutor der Frage waqas | 2013-11-03

  1. 56

    Können Sie dies tun, out-of-box mit angular-translate 2.0 in diesen Tagen. 

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

    wirkt Wunder für mich.

    InformationsquelleAutor der Antwort James

  2. 18

    Verwenden Sie den ng-bind-html-Direktive, ohne die geschweiften Klammern ({{ }})

    Wissen der Konfiguration erforderlich, um zu verwenden, dass die Richtlinie (ngBindHtml), Folgen Sie diesem link: https://docs.angularjs.org/api/ng/directive/ngBindHtml

    Nach ngSanitize enthalten ist, der folgende code sollte funktionieren:

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

    InformationsquelleAutor der Antwort A.Infante

  3. 9

    Dies funktioniert für mich... der HTML-Code wird interpretiert, für schöne Schriftstile (z.B. Fett, Kursiv, etc.)

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

    Allerdings brauchte ich auch, um sicherzustellen, dass ich nicht mit escape-Strategie in der provider-setup. Das verwirrte mich eine Weile.

    • Funktioniert: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
    • NÖ: $translateProvider.useSanitizeValueStrategy( 'escape' );

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

    Mit: angular-translate v2.13.1

    InformationsquelleAutor der Antwort Michael R

  4. 6

    Habe ich die Lösung gefunden.
    Ich war mit AngularJS v1.2.0-rc.3 hat ng-html-bind-unsafe veraltet. Jetzt eckig hat ng-bind-html statt ng-html-bind-unsafe. Aber man hat zu injizieren angular-sanitize als eine Abhängigkeit, um es arbeiten.

    Ersetzte ich

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

    mit 

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

    und die Dinge begannen zu arbeiten.

    InformationsquelleAutor der Antwort waqas

  5. 2

    Hier gibt es viele Möglichkeiten zu mischen, bis html (zusammen mit scope-Variablen, zusammen mit interpretion, wenn Sie müssen Dinge wie ng-klicken Sie in Ihrem html-übersetzungen):

    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>

    InformationsquelleAutor der Antwort armyofda12mnkeys

  6. 1

    Standardmäßig AngularJS Flucht-und code-es zeigt aus Gründen der Sicherheit, die Sie brauchen, zu erzählen Winkel der Saiten, die Sie nicht wollen, zu entkommen, in den älteren Zeiten, bevor AngularJS 1.2 Entwickler tun konnte, dass durch die Verwendung ng-bind-html-unsafe aber in AngularJS 1.2, die ist veraltet.

    Verwenden html tags in strings, in AngularJS 1.2+, die Sie herunterladen müssen angular-sanitize Modul und fügen Sie es in Ihre Anwendung Abhängigkeiten.

    Jeder string enthält den html code, den Sie können es öffnen, indem Sie mit ng-bind-html Automatisch verwendet $desinfizieren, in Ihrem Fall es wird sein ng-bind-html="'add_card-title' | translate"

    Referenz:

    Auf Medium

    AngularJS-Dokumentation

    InformationsquelleAutor der Antwort Ya Basha

  7. 1

    Können Sie <p [innerHTML]="'add_card-title' | translate"></p>

    InformationsquelleAutor der Antwort Camilo Soto

  8. 0

    Ich habe versucht, sowohl Ihre Antworten und keiner von Ihnen arbeitete auf 1.0.7 also für alle, die arbeiten vor 1.2 Sie können es so machen

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

    InformationsquelleAutor der Antwort J.Pip

  9. 0
    "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>

    InformationsquelleAutor der Antwort Leo

Schreibe einen Kommentar