59

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>

それを達成する方法はありますか?

ここに私のプランカーがあります: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

参考までに、この問題を確認できます: https://github.com/PascalPrecht/angular-translate/issues/173

注:私はそれを処理するためにコントローラーを巻き込みたくありません。

4

10 に答える 10

61

最近では、 angular-translate 2.0を使用してこれをすぐに実行できます。

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

私にとって不思議に働きます。

于 2014-03-03T23:22:00.233 に答える
21

中括弧 ({{ }}) なしで ng-bind-html ディレクティブを使用する必要があります。

そのディレクティブ (ngBindHtml) を使用するために必要な構成を知るには、次のリンクに従ってください: https://docs.angularjs.org/api/ng/directive/ngBindHtml

ngSanitize が含まれた後、次のコードが機能するはずです。

<p ng-bind-html="'add_card-title' | translate"></p>
于 2014-10-17T22:53:45.967 に答える
7

私は解決策を見つけました。私は非推奨になったものを使用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>

そして物事が動き始めました。

于 2013-11-03T16:16:57.207 に答える
2

デフォルトでは、安全上の理由から AngularJS のエスケープと表示されるコードが表示されます。AngularJS 1.2 の開発者が AngularJS 1.2 を使用してそれを行う前に、エスケープしたくない文字列を angular に伝える必要がありますng-bind-html-unsafeが、AngularJS 1.2 では廃止されました。

文字列で html タグを使用するには、AngularJS 1.2+ でangular-sanitizeモジュールをダウンロードして、アプリケーションの依存関係に含める必要があります。

ng-bind-html任意の文字列には、自動的に $sanitize を使用して表示できる html コードが含まれています。ng-bind-html="'add_card-title' | translate"

参考のため:

ミディアムで

AngularJS ドキュメント

于 2014-12-18T09:42:30.757 に答える
2

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>
于 2016-10-05T21:53:46.383 に答える