angular.js - set templateUrl dynamically by language (app.config stateprovider)

Question

I'm developing a mobile app using Ionic framework and I have a big problem to handle the multilanguage functionality for help page.

I have 2 languages (en + de) and I want to load help_en.html or help_de.html depending on the language.

I have set in the main controller the default language and the changeLanguage function which will set the lang in $cookies.language and it's working;

1.View:

    <a ng-href="#/help" >

2.MainCtrl -change language function:

    $scope.changeLanguage = function(lang) {
      $scope.translation=translationService.getTranslation($scope, lang);
      $cookies.lang=lang;
    };

3.The config from app.js looks something like that :

    var myApp = angular.module('MyPetApp', ['ionic', 'config', 'MyApp.controllers', 'ngCordova', 'ngResource', 'ngCookies']);

  myApp.config(function($stateProvider, $urlRouterProvider) {
    var $cookies;
    angular.injector(['ngCookies']).invoke(function(_$cookies_) {
      $cookies = _$cookies_;
    });
    if ($cookies.language==undefined){
      $cookies.language = 'en'
    }

    $stateProvider
      .state('default', {
        url: "/",
        templateUrl: "templates/default.html"
     })

    .state('help', {
        url: '/help', 
        templateUrl: function (){
            return 'templates/help_'+$cookies.lang+'.html'
        }
    })
      $urlRouterProvider.otherwise('/');
  });

This is working in chrome but on mobile will stay all the time on "en" language even I change the value from $cookies.language to "de".

What can I do to get this job done? Any ideea ? I really appreciate any help

Thanks

I think it's not a good solution to create 2 states for aboutUs-en and de :) — godzo101, Feb 23 '15 at 20:08
I'm using this example http://blog.novanet.no/creating-multilingual-support-using-angularjs/ ... I can change to localStorage if will work but just here (dynamic templateUrl ) I have this problem because on other pages cookies are working fine — godzo101, Feb 24 '15 at 06:40

score 1 · Answer 1 · edited May 23 '17 at 12:18

About you problems with cookies in a ionic & cordova app.. the solution is using localStorage. Take a look to this question

About i18n I suggest you to use angular-translate. I have already used in a ionic app for android and ios. Is very useful if you need to translate all strings and small texts of you app.

Probably I had the same your problem in my help page, and because I had a lot of texts (some paragraphs) I prefered use plain html with all texts and showing only the current language with a simple ng-if:

<ion-content class="has-header">
    <div class="list padding card" ng-if="settings.languageId == 'en'">
      ...
      English text here
      ...
    </div>
    <div class="list padding card" ng-if="settings.languageId == 'pt'">
      ...
      Portuguese text here
      ...
    </div>
</ion-content>

angular.js - set templateUrl dynamically by language (app.config stateprovider)

1 Answers1