Angular translateの使い方 (その2、利用編)

前回の、
Angular translateの使い方 (その1、準備編) - まめージェント
に続いて、angular-translateに関して。
今回は、使い方からです。

ディレクティブで使う

ディレクティブから使うのは簡単で、

<p translate="common.save"></p>

こうすると、言語設定に応じて各言語の"保存"や""Save"が表示されます。
ちなみにタグに

保存

とやっても問題なく動きます。
むしろ僕はタグに値を書くようにしています。というのも、書いておかないとタグtranslate=""の中から値を推測する必要が出てくるので、その後のメンテが大変になるのです・・・。

Controllerで使う

Controllerで使うときはまず、$translateをInjectします。

myApp.controller('myController', ['$translate', 
 function($translate){

 }]);

こんな感じ。

そして、

var saveValue;

$translate([
		'common.save',
	])
	.then(function (translations) {
		saveValue = translations['common.save'];
	});

的な感じで設定値を読み込み、
あとはこの値 (saveValue)を使うのみです。

上記の書き方は他にもいくつかあるようですが、
いろいろと試した結果、上記なら動く＆わかりやすいということでこの表記方法に落ち着いています。

動的な値を設定する

そしてたとえば「5/19の一言」のような感じで「変数(ここで日付) + 翻訳」という文言を表示したいケース。このケースでは、多少作業が増えます。

言語設定をしたJSONファイルを下記のように変更します。

"common": {
	"word": "{{value}}の一言"
}

そして、ディレクティブ側でこんな記載をします。

{{today}}'s wisdom

ここでいうvalueが、JSONファイルに定義するvalueを指し、todayはControllerで定義される$scope.todayの値を示します

これで動くはず。

言語を切り替える

言語の切り替えは、$translate.use('ja');のように指定します。
たとえばこんなメソッドですかね。

$scope.changeLanguage = function (currentLang) {

	if(currentLang === 'ja' || currentLang == 'ja_jp'){
		$translate.use('ja');
	} else if (currentLang === 'en'){
		$translate.use('en');
	} else {
		$translate.use('ja');
	}

};

これでangular-translateを使った翻訳系の話は大丈夫なハズ！