最初$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>
これは次のようなものを吐き出します
