Dynamic language selection in AngularJS

Question

Hi I am developing one application in Angularjs. This website will be in two languages. They are arabic and english. Belo is the logic i am using for selection of language. If the browser default language is Arabic then display website in Arabic. If the browser default language is not Arabic then display website in English.

Also i have kept image(Arabic and English) on website to switch between languages.

  <div class="language"><a href="#"><img src="images/arabic.png"></a></div>
        <div class="language"><a href="#"><img src="images/en-english-language-browser-function-512.png"></a></div>

now two anchor tags are there. I am trying to bind image to anchor tag based on the language selection. I do not want 2 anchor tags.

app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', '$window', function ($scope, $translate, toastr, $window) {
    debugger;
    var lang = $window.navigator.language || $window.navigator.userLanguage;
    if (lang === 'ar-sa')
    {
        $translate.use('de_AR');
         //bind arabic.png
    }
    else
    {
        $translate.use('de_EN');
         //bind english.png
    }
}]); 

I am new to the angular world. May I get some help to complete this? Any help would be appreciated. Thank you.

Answer 1

This is not controller's problem and you should not use controller fot language selection.

You should use config phase for this, smth like this.

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!',
    BUTTON_TEXT_EN: 'english',
    BUTTON_TEXT_DE: 'german'
  })
  .translations('de', {
    HEADLINE: 'Hey, das ist meine großartige App!',
    INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
    BUTTON_TEXT_EN: 'englisch',
    BUTTON_TEXT_DE: 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
});

Answer 2

You could just store the current language in a $scope variable and use that with ng-src to set the source of the image dynamically. Like this:

<div class="language">
    <a href="#">
        <img ng-src="images/{{ lang === 'ar-sa' ? 'arabic.png' : 'en-english-language-browser-function-512.png' }}"/>
    </a>
</div>

---

app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', '$window', function ($scope, $translate, toastr, $window) {
    debugger;
    $scope.lang = $window.navigator.language || $window.navigator.userLanguage;
    if ($scope.lang === 'ar-sa')
    {
        $translate.use('de_AR');
         //bind arabic.png
    }
    else
    {
        $translate.use('de_EN');
         //bind english.png
    }
}]);

Answer 3

Use two json files for your website one for English and another one for Arabic. In each files you should give same key and different values like:

For English [ "title":"Website", "img": "your img src path for English" ]

For Arabic [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

specify these two files in $translateProvider.useStaticFilesLoader use angular-translate-loader-static-files you can find it on bower or npm.

Then you just mention your img like this:

<img src={{img}}/>

Thats it...