How to angular-translate controller function objects

0
votes

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;
            }
...
2
angularjsangular-translate

2 Answers

0
votes

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.

0
votes

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 }
                    ]
...
})
})