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!