AngularJSの動的言語選択

Question

こんにちは私はAngularjsで1つのアプリケーションを開発しています。このウェブサイトは2つの言語で表示されます。彼らはアラビア語と英語です。ベロは私が言語の選択に使っている論理です。 ブラウザのデフォルト言語がアラビア語の場合、ウェブサイトをアラビア語で表示します。 ブラウザのデフォルト言語がアラビア語でない場合、ウェブサイトを英語で表示します。

また、言語を切り替えるためにウェブサイトに画像（アラビア語と英語）を保管しています。

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

ここで2つのアンカータグがあります。言語選択に基づいて画像をアンカータグにバインドしようとしています。私は2つのアンカータグを必要としません。

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 
    } 
}]); 

私は新世界です。私はこれを完了するためのいくつかの助けを得ることができる？どんな助けもありがとう。ありがとうございました。

Answer 1

現在の言語を$ scope変数に格納し、それをng-srcとともに使用して、画像のソースを動的に設定するだけでもかまいません。このように：

<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

これは、コントローラの問題ではありません、あなたは言語選択FOTコントローラを使用しないでください。

これにはconfigフェーズを使用する必要があります。このようにしてください。

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

ウェブサイト用に2つのjsonファイルを英語用とアラビア語用にそれぞれ使用します。 $translateProvider.useStaticFilesLoader使用angular-translate-loader-static-filesあなたは亭やNPMでそれを見つけることができ、これら2つのファイルを指定[ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

アラビア の英語 [ "title":"Website", "img": "your img src path for English" ]

について

：各ファイルでは次のような同じキーと異なる値を与える必要があります。これだけ

<img src={{img}}/>

...