How to angular-translate controller function objects - angularjs

Question

I cannot find examples for how to translate objects inside of functions, only examples for translating html content.
Inside the function are system button labels that need to be translated. I have provided the actual en.json and th.json files to show what needs to be translated. I can find no examples for angular-translate that translate non-html objects like in this function. I have managed to get translation working on all other areas of my application, but not this function. The documentation http://angular-translate.github.io/docs/#/guide/03_using-translate-service does not provide a good example that fits my code. I have seen others ask this same type of question, and just be pointed to the documentation (i.e. https://github.com/angular-translate/angular-translate/issues/1466).
en.json
{
"CHOOSE_IMAGE": "Choose image source",
"CAMERA": "Camera",
"LIBRARY": "Library",
"CANCEL": "Cancel"
}
th.json
{
"CHOOSE_IMAGE": "เลือกที่มาของภาพ",
"CAMERA": "กล้อง",
"LIBRARY": "คลังรูปภาพี่ี",
"CANCEL": "ยกเลิก"
}
feedback.controller.js
...
function getImageSource() {
var deferred = $q.defer();
$ionicActionSheet.show({
buttons: [
{ text: 'CAMERA' },
{ text: 'LIBRARY' }
],
titleText: 'CHOOSE_IMAGE',
cancelText: 'CANCEL',
cancel: function () {
deferred.reject();
},
buttonClicked: function (index) {
if (index === 0) {
deferred.resolve(Camera.PictureSourceType.CAMERA);
} else {
deferred.resolve(Camera.PictureSourceType.PHOTOLIBRARY);
}
return true;
}
});
return deferred.promise;
}
...

Answer 1

Well, apparently all the necessary information are in the docs. But let me do your work..
You have to inject $translate service in your controller. Assuming you have your translations already loaded the most convinient way to translate your labels is to use $translate.instant() method. What does it do?
According to docs http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translate it:
Returns a translation instantly from the internal state of loaded translation. All rules regarding the current language, the preferred language of even fallback languages will be used except any promise handling. If a language was not found, an asynchronous loading will be invoked in the background.
So your code should look like that:
feedback.controller.js
...
function getImageSource() {
var deferred = $q.defer();
$ionicActionSheet.show({
buttons: [
{ text: $translate.instant('CAMERA') },
{ text: $translate.instant('LIBRARY') }
],
titleText: $translate.instant('CHOOSE_IMAGE'),
cancelText: $translate.instant('CANCEL'),
cancel: function () {
deferred.reject();
},
buttonClicked: function (index) {
if (index === 0) {
deferred.resolve(Camera.PictureSourceType.CAMERA);
} else {
deferred.resolve(Camera.PictureSourceType.PHOTOLIBRARY);
}
return true;
}
});
return deferred.promise;
}
...
Or you can use asynchronous loading with:
feedback.controller.js
....
$translate(['CAMERA',
'LIBRARY',
'CHOOSE_IMAGE',
'CANCEL']).then(function (translations) {
$ionicActionSheet.show({
buttons: [
{ text: $translate.instant('CAMERA') },
{ text: $translate.instant('LIBRARY') }
],
....
Hope it helps.

Answer 2

Use filter function
.controller(["$filter",....],function($filter,....){
var translateFilter=$filter("translate");
...
buttons: [
{ text: translateFilter('CAMERA') },
{ text: translateFilter('LIBRARY') }
]
...
})
or when translations isn't loaded already
.controller(["$q","$translate",....],function($q,$translate,....){
var translateFilter=$filter("translate");
$q.all({
CAMERA:$translate('CAMERA'),
LIBRARY:$translate('CAMERA')
}).then(function(translations){
...
buttons: [
{ text: translations.CAMERA },
{ text: translations.LIBRARY }
]
...
})
})