角度翻译父范围答案

【问题标题】：Angular Translate Parent Scope角度翻译父范围
【发布时间】：2015-03-15 18:06:09
【问题描述】：

也许我遗漏了一些东西，但与 ng-translate 一样好，我不明白他们为什么选择使用子作用域而不是继承父作用域。

鉴于以下设置示例：-

var app = angular.module('plunker', ['pascalprecht.translate']);

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.preferredLanguage('en');

    $translateProvider.translations('en', {
      'HELLO': 'Hello {{name}}, how are you?'
    });
  }
]);

app.run(['$translate',
  function($translate) {
    $translate.use('en');
  }
]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Angular';
});

ng-translate 强制使用以下 html，使用“translate-values”来指定范围插值：-

  <body ng-controller="MainCtrl">
    <p translate translate-values="{name: name}">HELLO</p>
  </body>

但我真正想说的是“翻译”并让父范围正确插入名称，例如：-

  <body ng-controller="MainCtrl">
    <p translate>HELLO</p>
  </body>

但这不起作用。

我知道这看起来很琐碎，但无论如何告诉 ng-translate 使用父范围并避免使用“翻译值”而不是创建子范围（或者这甚至是问题吗？？）

【问题讨论】：

标签： angularjs angularjs-scope angular-translate

【解决方案1】：

好的，找到答案了..使用“翻译编译”，它将使用父范围，所以html是

<body ng-controller="MainCtrl">
  <p translate translate-compile>HELLO</p>
</body>

唯一需要的其他更改是使用 ng-bind 而不是 {{ }} ..

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.preferredLanguage('en');

    $translateProvider.translations('en', {
      'HELLO': 'Hello <span ng-bind="name"/>, how are you?'
    });
  }
]);

不确定为什么 {{ }} 在这种情况下不起作用。

【讨论】：

【解决方案2】：

我通过将translate 过滤器传递给要使用的上下文，设法使{{ value }} 语法在翻译字符串中起作用。完全可以使用 this 作为上下文，这将产生如下 HTML 片段：<p>{{ 'TEXT_ID' | translate:this }}</p>。

【讨论】：