在angularjs控制器中本地化字符串属性

时间:2015-06-30 05:59:27

标签: javascript jquery angularjs

在我的angularjs控制器中,我正在注入翻译服务

(function () {
    "use strict";
    app.controller('homeController', ['$scope', translationService) {

    //Run translation if selected language changes
    $scope.translate = function () {            
        translationService.getTranslation($scope, $scope.selectedLanguage);
    };       
    $scope.translate();
}

和内部视图我正在翻译文本,如

{{ translation.HelloWorld }}

其中HelloWorld是语言json文件中的字符串。

由于我能够使用$scope.selectedLanguage检测当前选定的语言,这将返回所选语言engrusfra的字符串,如何翻译在对象内注入的文字控制器内的属性,例如

var myObj = { Id: 1, Name: "Default", Description: "Default" };

如何本地化名称和描述属性?

更新:

app.service('translationService', function ($resource) {    
    this.getTranslation = function ($scope, language) {
        var languageFilePath = '../app/locStrings/translation_' + language + '.json';
        $resource(languageFilePath).get(function (data) {
            $scope.translation = data;
        });
    };
});

其中每个文件的前缀为translation_,如

translation_eng.json 

translation_fra.json 内容

{
    "HELLO_WORLD": "Hello world en",
}

1 个答案:

答案 0 :(得分:3)

  

如何在Angular中使用本地化?

只需使用rootScope对象即可在角度中使用本地化。它与.net本地化概念非常相似。

  

本地化架构。

与.net本地化非常相似,在.net中,您可以放置​​一个本地化文件,其中所有语言翻译都以表格格式存储。 在这里,您可以根据自己的方便使用两个文件或一个文件。 (我更喜欢每种语言的单独文件)

一个文件中的所有语言。

{
  translationkey1:{
      en:'translationValue_english1',
      hi:'translationValue_hindi1',
      fr:'translationValue_french1',
  },
  translationkey2:{
      en:'translationValue_english2',
      hi:'translationValue_hindi2',
      fr:'translationValue_french2',
  },
  translationkey3:{
      en:'translationValue_english2',
      hi:'translationValue_hindi2',
      fr:'translationValue_french2',
  }
}

每种语言的单独文件。

{
  translationkey1:'translationValue1',
  translationkey2:'translationValue2',
  translationkey3:'translationValue3',
}
  

在视图中使用

在rootscope的翻译对象中复制翻译文件对象,以便您可以随处访问它。

一个文件中的所有语言。

{{translations[myObj.Name][selectedLanguage]}} // It will return English value for specific value from translation object.

每种语言的单独文件。

如果您使用单独的文件,则无需存储selectedLanguage格式,只需按照语言保留翻译对象。

{{translations[myObj.Name]}}
  

哪种方法很好。

如果翻译文件太大,为每种语言使用单独的文件是很好的方法。它会增加服务器命中率,但您可以轻松维护翻译。

使用单个文件存储所有语言会大大增加内存消耗。但减少服务器命中率。

Here是你的答案。