Translate ActionSheet


#1

Hey,

how can I translate the text from a ActionSheet inside a controller?
I’m using angluar-translate for translation.

// ACTIONSHEET für Tips
.run(function($ionicPlatform,$rootScope,$ionicActionSheet,$state) {

$rootScope.showTips = function() {
	var hideSheet = $ionicActionSheet.show({
		buttons: [
			{ text: '<div class="tips-icons center"><img src="img/tips/tips01.svg"/></div> <p class="actionsheet-center">Allgemein</p>' },
			{ text: '<div class="tips-icons center"><img src="img/tips/tips02.svg"/></div> <p class="actionsheet-center">12195-3</p>' },
			{ text: '<div class="tips-icons center"><img src="img/tips/tips03.svg"/></div> <p class="actionsheet-center">12195-2</p>' },
		],
		titleText: 'Tipps auswählen',
		cancelText: 'Abbrechen',
		cancel: function(index) {
			return true;
		},
		buttonClicked: function(index) {
			 if(index === 0){ // Allgemein
			 	$state.go('tab.tips01');
			 }
			 else if(index === 1){
				$state.go('tab.tips02');
			 }
			 else if(index === 2){
				$state.go('tab.tips03');
			 }
			 return true;
		}
	});
};

})

#2

no ideas? How can I translate the ‘text’ inside the “buttons”

if I’m using

{{'text‘ | translate}} 

inside the buttons it displays the {{'text‘ | translate}} as a text.
and

<div translate>text</div>

also wont work…


#3

Yes you need to do:
add $translate to controller then

    $scope.loadedTranslations = [];
    $scope.LoadValues = function(){
    $translate(['first','secound']).then(function(translations){
        $scope.poptranslation = translations;
        })
    };
 $scope.LoadValues();

then in template use

<p class="actionsheet-center">   $scope.loadedTranslations.first</p>

#4

I’m kinda confused… what you mean by template?

the Action sheet is called via controller.js with the .run command (see above)
and the Text which needs to be translated are inside the .run function.

I click on a tab to call the action sheet via ng-click="show()"
so there is no actual template.html file


#5

this is '<div class="tips-icons center"><img src="img/tips/tips01.svg"/></div> <p class="actionsheet-center">Allgemein</p>' the template :stuck_out_tongue:
Translaftions are in cofig so on run you should have them already populated…


#6

Ok I’m pretty newb, if you can, please guide me through this.

So I’m using angular-translate to translate my stuff.

This is my language.js

.config(function($translateProvider) {

$translateProvider.useStaticFilesLoader({
    prefix: 'language/locale-',
    suffix: '.json'
});

$translateProvider.registerAvailableLanguageKeys(['en', 'de', 'fr', 'it'], {
    'en-US': 'en',
    'en-UK': 'en',
    'de-DE': 'de',
    'de-CH': 'de',
    'fr-FR': 'fr',
    'it-IT': 'it',
});

$translateProvider.uniformLanguageTag('bcp47');
$translateProvider.determinePreferredLanguage();
$translateProvider.useSanitizeValueStrategy('escaped');
$translateProvider.fallbackLanguage('en');
$translateProvider.useLocalStorage();

})

For all my translations I’m pretty much using {{‘text’ | translate}} and it works.

I’ve got a Tab-Navigation where 1 of the tabs are calling an ActionSheet.

tabs.html

<!-- ACTION SHEET Tab -->
<ion-tab title="Tipps" icon-off="ion-ios-information-outline" icon-on="ion-ios-information" ng-click="showTips()">
	<ion-nav-view name="tips"></ion-nav-view>
</ion-tab>

there is actually no controller assigned to the tabs.html (but I could do that I guess that should’t be the problem)

still if I’m putting your suggest $scope.loadedTranslations.first inside my actionsheet template it shows up as a text or am I doing something wrong?


#7

Try to use <p class="actionsheet-center"> '+$scope.loadedTranslations.first+'</p>

Something like that


#8

I’m getting :

TypeError: Cannot read property ‘loadedTranslations’ of undefined


#9

.run(function($ionicPlatform,$rootScope,$ionicActionSheet,$state) {

add $scope or change all $scope to $rootScope


#10

okay works now. Can you explain me how I set up the text now?

I’ll get “undefined” now if I open up the actionSheet


#11

I still couldn’t figure this out, where to change the text. :frowning:


#12

Give code sample on codepen.


#13

To be honest, I don’t know who to get it to work in CodePen. How to build it with all the dependencies.


#14

what i can see you didin’t setup ur translations… so it don’t know what is that translation…


#15

Yes thats what I’m trying to say. If I add pascalprecht.translate to the dependencies the whole thing stops working


#16

update :


#17

Check this out


#18

I love you! :blush:

thx for your time. Its working.


#19

hm… im using .json files to load my languages… DE & EN is working but my IT & FR version dont…
can’t figure it out why.

it just shows me the used “allgemein” tag and not the translation for it.

I restart the project it didn’t helped.


#20

i dont know maybe json fcked up