Question

我有一个动态创建菜单的控制器。我的问题是，当用户更改语言时，我希望翻译菜单。我在范围内有菜单：

$scope.menu = [
            {label: 'home', route: '#/'},
            {label: 'dna', route: '#/dna'},
            {label: 'dna-list', route: '#/dna-list'},
            {label: 'Admin', route: '#/admin'}
        ]

我创建了一个翻译服务，它将翻译设置为范围，并且工作正常。在HTML中，我可以像这样使用它：

  <li>-------->{{translation.HELLO_WORLD}}</li>
  <ul class="nav navbar-nav navbar-collapse">
      <li ng-repeat="item in menu" ng-class="{active: item.route === menuActive }"><a href="#{{item.route}}">{{item.label}}</a> 
      </li>
  </ul>

问题

在将菜单创建到范围内时，使用该服务的正确方法或语法是什么？我是说如何将翻译的单词插入到此：

{label: 'home', route: '#/'},

ANSWER

对不起，伙计，这是一个非常愚蠢的问题。我刚刚将JavaScript添加到了JavaScript并重写了

$scope.menu = [
                {label: 'Home', route: '#/'},
                {label: 'DNA', route: '#/dna'},
                {label: 'Dna-list', route: '#/dna-list'},
                {label: 'Admin', route: '#/admin'}
            ]

每次用户更改语言时。我一开始觉得这太复杂了。如果语言是en那么......如果语言是swe，那么......

Answer 1

AngularJS应用程序中的翻译。这比我要求的要多一点，但这是我使用AngularJS创建多语言应用程序的解决方案：

第1阶段 - 创建翻译服务

angular.module('translationService', ['ngResource'])
    .factory('translationSvc', ['$resource',
        function ($resource) {  

    var getTranslation = function($scope, language) {
        var languageFilePath = 'translation/translation_' + language + '.json';
        console.log(languageFilePath);
        $resource(languageFilePath).get(function (data) {
            $scope.translation = data;
        });
    };
    return {getTranslation:getTranslation};
}

]）;

阶段2 - 创建和添加语言json

我有一个文件夹翻译，在里面我有json文件到每种语言，如translation_en.json和translation_fi.json等。例如英文：

{  
"COLOR" : "Color",
"HELLO" : "Hello",
"HELLO_WORLD" : " Hello World!"
}

芬兰语：

{  
"COLOR" : "Väri",
"HELLO" : "moro",
"HELLO_WORLD" : " Hei maailma!"
}

阶段3 - 将您的服务注入控制器并使用它

angular.module('rmaClientApp')
    .controller('RmaCtrl',
            function ($scope,$route,$location,translationSvc) {

$scope.translate = function (lang) {
            $scope.selectedLanguage = lang;
            console.log('lang--------> ' + lang);
            translationSvc.getTranslation($scope, $scope.selectedLanguage);

}

在初始阶段，您还必须致电您的服务并定义您的$ scope.selectedLanguage =＆＃39; en＆＃39;。

阶段4 - 使用HTML翻译

<h2>{{translation.HELLO_WORLD}}</h2>

阶段5 - 如果使用JavaScript创建菜单，则将菜单翻译为$ scope

if($scope.selectedLanguage === 'fi'){
            $scope.menu = [
            {label: 'Koti', route: '#/'},
            {label: 'DNA', route: '#/dna'},
            {label: 'DNA-lista', route: '#/dna-list'},
            {label: 'Hallinnoi', route: '#/admin'}
        ]   

        }
        if($scope.selectedLanguage === 'en'){
            $scope.menu = [
            {label: 'Home', route: '#/'},
            {label: 'DNA', route: '#/dna'},
            {label: 'Dna-list', route: '#/dna-list'},
            {label: 'Admin', route: '#/admin'}

        ]   

        }

Answer 2

Inject the $translate service into your controller.

angular.module('myApp').controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.translatedText = $translate('ANOTHER_TEXT', { value: 10 });
  // would result in 'I had 10 beers.'

}]);

如何在Angular控制器中调用JSON内的翻译服务？

2 个答案: