AngularJS에서 동적 언어 선택

안녕하세요 저는 Angularjs에서 하나의 응용 프로그램을 개발 중입니다. 이 웹 사이트는 두 가지 언어로 제공됩니다. 그들은 아랍어와 영어입니다. Belo는 언어 선택에 사용하는 논리입니다. 브라우저 기본 언어가 아랍어 인 경우 아랍어로 웹 사이트를 표시하십시오. 브라우저 기본 언어가 아랍어가 아닌 경우 웹 사이트를 영어로 표시하십시오.AngularJS에서 동적 언어 선택

나는 또한 웹 사이트에 언어 간 전환을 위해 이미지 (아랍어 및 영어)를 사용하고 있습니다.

<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 개의 닻 꼬리표를 원하지 않는다.

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

나는 각기 다른 세계에 익숙하다. 이걸 완성하는데 도움이 될까요? 어떤 도움을 주시면 감사하겠습니다. 고맙습니다.

출처

2017-04-19 Niranjan Godbole

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

출처

2017-04-19 10:35:22

감사합니다. 그것은 효과가 있었다. –

어떻게이 이벤트를 클릭 할 수 있습니까? 예를 들어 영어를 클릭하면 컨트롤러 안에 영어가 표시됩니다. 내가 어떻게 할 수 있니? –

이 컨트롤러의 문제가되지 않습니다 당신이 언어 선택 FOT 컨트롤러를 사용하지 않아야합니다 : 이것처럼.

이렇게하려면 config phase를 사용해야합니다.

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

출처

2017-04-19 10:42:36 Vitalii

웹 사이트 용으로 두 개의 json 파일을 영어로 사용하고 아랍어로 사용하십시오. $translateProvider.useStaticFilesLoader 사용 angular-translate-loader-static-files 당신은 정자 또는 NPM에서 찾을 수있는이 두 파일을 지정 [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

아랍어 영어 [ "title":"Website", "img": "your img src path for English" ]

를 들어

: 각 파일에서 당신은 같은 같은 키와 다른 값을 제공해야합니다.

그런 다음 당신은이처럼 IMG을 언급 :

<img src={{img}}/>

그게 전부를 ...

출처

2017-06-20 09:52:39

AngularJS에서 동적 언어 선택

답변

관련 문제