angularjs - 角度補間、ng-bind および ng-translate の予期しない動作

Question

ng-translate を使用する場合に ng-bind='blah' とは対照的に、Angular 補間 {{ blah }} を使用すると、予期しない動作の違いが見られます。したがって、非常に単純なコントローラーが与えられます

$scope.name = "Angular"

以下は、補間と ng-bind の両方を使用して完全に機能します..

<div>Interpolation : Hello {{ name }}</div>
<div>ng-bind       : Hello <span ng-bind="name"/></div>

出力中

Interpolation : Hello Angular
ng-bind : Hello Angular

さて、 ng-translateを導入し、最初に簡単な変換テーブルをセットアップします..

$translateProvider.translations('en', {
  'WELCOME-INTERPOLATE': 'Hello {{ name }}',
  'WELCOME-BIND': 'Hello <span ng-bind="name"/>'
});

その後

<span translate translate-values="{name: name}">WELCOME-INTERPOLATE</span>
<span translate translate-values="{name: name}">WELCOME-BIND</span>

生産する

Hello Angular                     <-- This is interpolate
Hello                             <-- This is ng-bind and **fails**

次に、「translate-compile」を追加することで、「translate-values」の必要性がなくなり、親スコープへの「translate」アクセスが可能になります。同じ HTML で「translate-compile」が「translate-values」に置き換わります。

<span translate translate-compile>WELCOME-INTERPOLATE</span>
<span translate translate-compile>WELCOME-BIND</span>

反対の結果を生む

Hello                             <-- This is interpolate and **fails**
Hello Angular                     <-- This is ng-bind

1 に答える 1