Angular translate does not work


#1

Hi,

I am trying to use angular translate to do change the text of buttons and tabs after user has selected an option in Settings view. I am using starters tab example. For some reason, it does not work when I try to call $translate.use();

Here is some sample code. Inside my app.js, I inserted these at the top

    var translations_en = {
    tab_dashboard: "Dashboard",
    tab_rewards: "Rewards",
    btn_settings: "Settings",
    settings: "Settings"
};

var translations_ch = {
    tab_dashboard: "CNDashboard",
    tab_rewards: "CNRewards",
    btn_settings: "CNSettings",
    settings: "CNSettings"
};

.config(function($translateProvider) {
    $translateProvider.translations('en', translations_en);
    $translateProvider.translations('ch', translations_ch);
    $translateProvider.preferredLanguage('en');
})

Inside my controllers.js, I have this:

.controller('SettingsCtrl', function($scope, $translate, $rootScope) {

$scope.curlang = $translate.use();
        $scope.changeLanguage = function(key) {
            $translate.use(key);
            $scope.curlang = key;
        };
})

And finally inside my Settings view:

<ion-view view-title="{{ 'settings' | translate }}">
  <ion-content class="padding">
    <ion-list>
        <h3>Language Option</h3>

        <div class="button-bar">
            <button ng-click="changeLanguage('en')" ng-class="curlang=='en' ? 'button button-dark' : 'button'">English</button>
            <button ng-click="changeLanguage('ch')" ng-class="curlang=='ch' ? 'button button-dark' : 'button'">Chinese</button>
        </div>

    </ion-list>
  </ion-content>
</ion-view>

When I select the button, the language does not get changed at all. I have followed all examples from the internet and not sure if I overlooked anything. If I try to call translate.use(‘ch’) at the start of the controller, the text gets changed. So I am guessing, somehow something is not being updated when I do a translate.use() inside changeLanguage.

I am using latest copy of Ionic. Please help!


#2

Maybe it’s due to ionic view caching.


#3

I’ve never had luck with any other plugins but this one:

I haven’t used it with Ionic yet, but all my web angular projects use it and it rocks. Let me know if you have a chance to utilize it, I will be integrating with my ionic project in the next month or so, so if you have time I’ll also report back what I’m able to find.


#4

Some additional resources:

Some sample code: https://github.com/Robinyo/Vardyger/blob/master/core/client/app/scripts/app.js


#5

I’ve tried to disable caching by inserting $ionicConfigProvider.views.maxCache(0), but it doesn’t seem to work either.

Update: Please refer to my latest reply below. Disable caching works.


#6

I used:

bower install --save angular-translate
bower install --save angular-translate-loader-static-files

index.html:

...

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- endbower -->

...

app.js:

...

$translateProvider
  .useStaticFilesLoader({
    prefix: 'scripts/locales/',
    suffix: '.json'
  })

  .preferredLanguage('de_DE')
  .fallbackLanguage('de_DE')
  .useSanitizeValueStrategy('escapeParameters');

...

de_DE.json:

{

  "MAIN_TEMPLATE_TITLE":         "Inhalt",
  "PREVIEW_TEMPLATE_TITLE":      "Vorschau",
  "EDITOR_TEMPLATE_TITLE":       "Editor",

  "SIDE_MENU_TEMPLATE_CONTENT":  "Inhalt",
  "SIDE_MENU_TEMPLATE_NEW_POST": "neuer Beitrag",
  "SIDE_MENU_TEMPLATE_SETTINGS": "Einstellungen",

  "ALL_POSTS":                   "Alle Beiträge",
  "NO_POSTS":                    "keine Einträge :(",
  "EDIT":                        "BEARBEITEN",
  "MARKDOWN":                    "MARKDOWN",
  "PREVIEW":                     "VORSCHAU",
  "UPDATE_POST":                 "UPDATE BEITRAG"

}

side-menu-template.html:

...

<ion-item menu-close class="item-icon-left item-dark" ng-click="switchLanguage('en_US')">
    <icon ios="ion-ios-gear" android="ion-settings" default="ion-settings"></icon>
    {{ 'SIDE_MENU_TEMPLATE_SETTINGS' | translate }}
</ion-item>

...

side-menu-controller.js

  ...

  $scope.switchLanguage = function (key) {
    $translate.use(key);
  };

  ...

The source: https://github.com/Robinyo/Vardyger


#7

Hi everyone,

Thanks for the help. After I tried again and added $ionicConfigProvider.views.maxCache(0), it seems to work but I need to go to another view before coming back to the same view. I had to call $translate.use again before the change is reflected on other views:

$translate.use(key);
// Works after I call this below but does not update current view or the tabs
$translate.use();

My project is based on tabs. The tabs text is not updated though. Is there anyway to manually refresh the tabs view and the existing view?


#8

Completely disabling view caching is rather drastic but at least it showed that it has an impact on translate. Maybe you could solve it just by using view events like $on(’$ionicView.beforeEnter’) ?


#9

Hi gmarziou,

I am not sure how to use that view events to refresh the content. Would you be able to guide?

Currently, I am able to reflect the changes as well as the tabs label by doing this:

$scope.languageChange = function(item) {
        $translate.use(item.value);
       // Calling this will reload the existing view and also all views. Tabs get updated too
       $state.go($state.current, {}, {reload: true});
  };

Btw, this will only if view caching is disabled. Not sure if this will have any impact on the performance?


#10

I wrote a post about using angular-translate for internationalisation (i18n) and localisation (l10n) that might help: http://robferguson.org/2015/07/22/internationalisation-i18n-and-localisation-l10n-for-ionic-apps/


#11

Put the title in <ion-nav-title> tag, don’t place it inside <ion-view> tag.

example:<ion-view> <ion-nav-title>{{pageTitle | translate}}</ion-nav-title>