AngularJS中的動態語言選擇

嗨，我正在Angularjs中開發一個應用程序。本網站將採用兩種語言。他們是阿拉伯語和英語。貝洛是我用來選擇語言的邏輯。如果瀏覽器的默認語言是阿拉伯語，則用阿拉伯語顯示網站。如果瀏覽器默認語言不是阿拉伯語，則以英文顯示網站。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

感謝。有效。 –

我怎樣才能得到這個點擊事件？例如，如果我點擊英語，我應該在控制器中獲得英語。我怎樣才能做到這一點？ –

這不是控制器的問題，你不應該使用控制器光纖收發器語言選擇。

你應該使用配置階段，這樣的smth。

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文件，一個用於英語，另一個用於阿拉伯語。在每一個文件，你應該給予相同的密鑰和喜歡不同的值：

對於英語 [ "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你可以找到它的涼亭或NPM指定這兩個文件。

然後你剛纔提到你的IMG這樣的：

<img src={{img}}/>

完蛋了......

來源

2017-06-20 09:52:39

AngularJS中的動態語言選擇

回答

相關問題