angularjs - 角度插值、ng-bind 和 ng-translate 意外行为

Question

使用 Angular 插值 {{ blah }} 而不是 ng-bind='blah'使用 ng-translate 时，我看到了意外的行为差异。所以给定一个非常简单的控制器

$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**

然后通过添加“翻译编译”，据我了解，它消除了对“翻译值”的需要，并让“翻译”访问其父范围，相同的 HTML 用“翻译编译”替换“翻译值”

<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

例如，请参阅我的plunk

score 0 · Accepted Answer

这是在github中解决的：

一切都按预期工作。

要么你错过了值，要么 HTML（也就是应该被解析的模板）错过了编译标志。

见 plunkr

1 回答 1