Angular translate does not work

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!

Maybe it’s due to ionic view caching.

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.

Some additional resources:

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

1 Like

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.

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

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?

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’) ?

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?

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/

1 Like

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>

1 Like