web-dev-qa-db-ja.com

AngularJS：コントローラーまたはサービスから角度変換の言語を設定する

角度変換の使用に興味があります。

起動時に最初に発生する多くのセットアップ呼び出しのため、設定中にjson言語を提供できません。また、非同期ローダーを使用することもできません。後でコントローラーまたはサービスから言語を指定できるようにする必要があります。

$translateProvider.translations(.., ...)は使用する呼び出しですが、$translateProviderはコントローラーまたはサービスでは使用できませんが、構成でのみ表示されるようです。

$translateには、言語のJSONをロードする機能がないようです。

回避策はありますか？

angularjsangular-translate
10
Joel Basson

結局そこに着いた。

.config

$translateProvider.useLoader('customLoader');

カスタムローダー...

angular.module('myapp').factory('customLoader', function ($q, TranslationService) {

    return function (options) {
        var deferred = $q.defer();

          deferred.resolve(TranslationService.getLanguages().filter(function(lang){
                return lang.key == options.key
          })[0].values);

        return deferred.promise;
    };

});

データを共有するためのTranslationService

angular.module('myapp').factory('TranslationService', function () {
    var languages = [];

    return {
        setLanguages: function (data) {
            languages = data;
        },

        getLanguages: function () {
            return languages;
        }
    }
});
4
Joel Basson

最初に_$translate_をコントローラーに注入します。

_app.controller('MainCtrl', function($scope, $state, $translate) {});
_

次に、$translate.use()を使用して現在の言語を取得および設定できます。

_var lang = $translate.use(); // holds current lang
$translate.use(lang);  // sets lang to use
_

設定後に新しい翻訳を追加する必要がある場合は、部分ローダーを使用できます。

_// config example
app.config(function($translateProvider, $translatePartialLoaderProvider){
  // "known" translations here, in {lang}.main.json, if any
  $translatePartialLoaderProvider.addPart('main'); 
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: '/path/to/files/{lang}.{part}.json'
  });
});

// controller
app.controller('MainCtrl', function($scope, $translate, $translatePartialLoader){
  $translatePartialLoader.addPart('translation');
  $translate.refresh();
  $translate.use('en');
});

// en.translation.json
{ "KEY" : "Value", ... }
_

それが十分に動的でない場合は、いつでもオンザフライで翻訳を行うことができます。

_// config
app.config(function($translateProvider, $translatePartialLoaderProvider){
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en',{
      'TITLE': '{{ title }}',
      'SUBTITLE': '{{ subtitle }}',
      'STATIC': 'This is static'
    });
});

// controller
app.controller('MainCtrl', function($scope, $translate){
  $scope.dynamic = {
    'title': 'This is my header',
    'subtitle': 'My subtitle'
  };
});

// template
<pre>{{ 'TITLE' | translate:dynamic }}</pre>
<pre>{{ 'SUBTITLE' | translate:dynamic }}</pre>
<pre>{{ 'STATIC' | translate }}</pre>
_

これは次のようなものを吐き出します

enter image description here

20
Mikko Viitala

多分これをチェックしてください：

http://www.ng-newsletter.com/posts/angular-translate.html

「実行時の言語の切り替え」の下

$translate.use(); // Returns the currently used language key
$translate.use('en'); // Sets the active language to `en`

app.controller('TranslateController', function($translate, $scope) {
  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
});
2
Konstantin Krass

これは機能します。 storageServiceにはローカルストレージがあり、ローカルストレージに「NG_TRANSLATE_LANG_KEY」を設定した後。以下のように呼び出すことができます。

angular.module('myApp').run(['$rootScope', 'StorageService', function($rootScope, StorageService) {
    $rootScope.currentLanguage = StorageService.local.get('NG_TRANSLATE_LANG_KEY') || 'en'; 
}]);


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="TranslateController" ng-init="changeLanguage(currentLanguage)">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('tr')">TR</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('en')">EN</a></li>
</ul>
1
Taner

動的なロードを管理する最良の方法は、次のようなresolve config routerブロックにあると思います

resolve: {
    translatePartialLoader:  function loadPartialLoader($translate,$translatePartialLoader) {
        $translatePartialLoader.addPart('home');
        return $translate.refresh();
    }
}
0
Whisher