Dynamische Sprachauswahl in AngularJS

Question

Hallo Ich entwickle eine Anwendung in Angularjs. Diese Website wird zweisprachig sein. Sie sind Arabisch und Englisch. Belo ist die Logik, die ich für die Auswahl der Sprache verwende. Wenn die Standardsprache des Browsers Arabisch ist, dann zeigen Sie die Webseite auf Arabisch an. Wenn die Standardsprache des Browsers nicht Arabisch ist, dann zeigen Sie die Website in Englisch an.

Auch ich habe Bild (Arabisch und Englisch) auf der Website beibehalten, um zwischen den Sprachen zu wechseln.

<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> 

jetzt zwei Anker Tags sind da. Ich versuche, das Bild basierend auf der Sprachauswahl an das Anchor-Tag zu binden. Ich möchte keine 2 Anker-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 
    } 
}]); 

Ich bin neu in der eckigen Welt. Kann ich Hilfe bekommen, um das zu vervollständigen? Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Sie könnten einfach die aktuelle Sprache in einer $ scope-Variablen speichern und diese mit ng-src verwenden, um die Quelle des Bildes dynamisch festzulegen. Wie folgt aus:

<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 2

Dies ist nicht der Beherrscher Problem und Sie sollten nicht verwenden Controller fot Sprachauswahl.

Sie sollten Config-Phase für diese, etw so verwenden.

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 3

Verwenden Sie zwei JSON-Dateien für Ihre Website für Englisch und eine andere für Arabisch. In jeder Dateien sollten Sie denselben Schlüssel und andere Werte wie geben:

für Englisch [ "title":"Website", "img": "your img src path for English" ]

Für Arabisch [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

geben diese beiden Dateien in $translateProvider.useStaticFilesLoader Verwendung angular-translate-loader-static-files Sie es auf Bower oder npm finden.

Dann erwähnen Sie einfach Ihre img wie folgt aus:

<img src={{img}}/>

Thats it ...