Question

也许我错过了一些东西，但是和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使用父范围并避免使用“translate-values”而不是创建子范围（或者甚至是问题？）

Answer 1

好的，找到答案..使用“translate-compile”，它将使用父范围，所以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?'
    });
  }
]);

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

Answer 2

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

角度翻译父范围

2 个答案: