angular-translate在控制器中翻译dict

时间:2017-02-21 19:56:04

标签: javascript angularjs angular-translate

在我的应用中,我使用https://github.com/angular-translate/angular-translate进行本地化。但我不明白如何在我的控制器中翻译dict值:

$scope.rx_usart_names = [
    {'val': 0, 'name': 'UART 1'},
    {'val': 2, 'name': 'UART 3'},
    {'val': 3, 'name': 'UART 4'},
    {'val': 5, 'name': 'UART 6'}
];

然后我在模板中显示它:

<md-select placeholder="Receiver Port" ng-model="RFDump.set.rx_usart">
  <md-option ng-repeat="option in rx_usart_names" ng-value="option.val">
    {{ option.name }}
  </md-option>
</md-select>

如果我使用: $translate.instant('UART 1')然后当我改变语言时,我的价值没有改变。

如果我使用$translate('UART 1'),则返回promise。

示例:

http://jsfiddle.net/ayqoeuyy/6/

1 个答案:

答案 0 :(得分:1)

您可以使用翻译过滤器...

translate过滤器解决方案:JsFiddle)  

HTML:

<md-select>
  <md-option ng-repeat="option in vm.rx_usart_names">
    {{ option.name | translate }}
  </md-option>
</md-select>

APP CONFIG:

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    UART1: 'UART1 (English)',
    UART2: 'UART2 (English)'
  });
  $translateProvider.translations('de', {
    UART1: 'UART1 (German)',
    UART2: 'UART2 (German)'
  });
  $translateProvider.preferredLanguage('en');
});

控制器:

function MyCtrl($translate) {

  var vm = this;

  vm.rx_usart_names= [{
    'val': 0,
    'name': 'UART1'
  }, {
    'val': 2,
    'name': 'UART2'
  }];

  vm.changeLanguage = function(langKey) {
    $translate.use(langKey);
  };
}

我知道如果您有许多要翻译的密钥,这不是使用过滤器的最快方法,但即使在他们正在使用它的angular i18n docs示例中也是如此。这不是一个纯粹的控制器解决方案,但至少它运作良好。我希望有人发布更好的方法来做到这一点......祝你好运