AngularJS中的动态语言选择 [英] Dynamic language selection in AngularJS

问题描述

我正在Angularjs中开发一个应用程序.该网站将使用两种语言.他们是阿拉伯语和英语.贝洛是我用来选择语言的逻辑.如果浏览器的默认语言是阿拉伯语，则以阿拉伯语显示网站.如果浏览器的默认语言不是阿拉伯语，则以英语显示网站.

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>

现在有两个锚标签.我正在尝试根据语言选择将图像绑定到锚标签.我不想要2个锚定标签.

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.

推荐答案

您可以将当前语言存储在$ scope变量中，并将其与ng-src一起使用以动态设置图像的来源.像这样:

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

这篇关于AngularJS中的动态语言选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！