AngularJS 中的动态语言选择

Question

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

我还在网站上保留了图像（阿拉伯语和英语）以在语言之间切换。

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

我是 angular 世界的新手。我可以得到一些帮助来完成这个吗？任何帮助，将不胜感激。谢谢你。

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

这不是控制器的问题，您不应该使用控制器来选择语言。

你应该为此使用配置阶段，像这样。

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

为您的网站使用两个 json 文件，一个用于英语，另一个用于阿拉伯语。在每个文件中，您应该提供相同的键和不同的值，例如：

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

对于阿拉伯语 [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

在$translateProvider.useStaticFilesLoader中指定这两个文件使用angular-translate-loader-static-files你可以在bower或npm上找到它。

然后你就这样提到你的 img:

<img src={{img}}/>

就是这样...

AngularJS 中的动态语言选择

Dynamic language selection in AngularJS

javascript

angularjs

angular-translate