2014-07-09 16 views
6

Używam l20n.js, aby dodać lokalizację do aplikacji Angular.js. Tu jest mój struktury projektu:Jak wskazać język do wyświetlenia w przeglądarce przy użyciu pliku l20n.js?

/index.html

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="trackingController.js"></script> 
    <script src="l20n.js"></script> 
    <link rel="localization" href="locales/manifest.json"> 
</head> 
<body> 
    <h2 data-l10n-id="name"></h2> 
    <p data-l10n-id="instructions"></p> 
</body> 
</html> 

/locales/manifest.json

{ 
    "locales": [ "en-US", "fr-FR"], 
    "default_locale": "en-US", 
    "resources": [ 
    "{{locale}}/strings.l20n", 
    ] 
} 

/locales/en-US/strings.l20n

<name "Search by name - EN"> 
<instructions "Enter one or more names - EN"> 

/locales/fr-FR/strings.l20n

<name "Search by name - FR"> 
<instructions "Enter one or more names - FR"> 

Jak mogę zamienić język angielski (np. plik /locales/en/strings.l20n) dla języka francuskiego? Wykonuje en-US pomimo wskazania lang="fr-FR" w index.html.

Odpowiedz

6

Domyślnie L20n wykorzystuje ustawienia językowe przeglądarki, aby określić, które ustawienia regionalne mają być wyświetlane użytkownikowi. Zgaduję, że twoja przeglądarka ma "en" lub "en-US" w ustawieniach językowych gdzieś. Możesz wyświetlić podgląd swojego ustawienia, otwierając konsolę programisty (Ctrl + Shift + K w przeglądarce Firefox, Ctrl + Shift + J w Chrome) i wpisując navigator.language lub (w nowszych wersjach Firefoksa) navigator.languages.

W przeglądarce Firefox możesz zmienić swoje preferencje językowe, przechodząc pod about:preferences#content i klikając "Wybierz" w obszarze "Języki". W Chrome istnieje podobny panel w Ustawieniach, ale w rzeczywistości nie zmienia on właściwości navigator.language, która jest known bug. Aby przetestować tę metodę, musisz pobrać i zainstalować francuską wersję przeglądarki Chrome.

Alternatywą jest użycie API L20n i wyraźnie zmienić język z:

document.l10n.requestLanguages(['fr']); 

Funkcja ta jest przydatna, jeśli chcesz, aby zapewnić kawałek UI pozwolić użytkownikom zmianę języka aplikacji. Na przykład możesz mieć rozwijane menu ze wszystkimi obsługiwanymi językami, które wywołuje document.l10n.requestLanguages po wybraniu nowej opcji.

+0

nie zdawałem sobie sprawy, że to ustawienie przeglądarki, myślałem, że aby określić ustawienia języka siebie. Dzięki! –

+0

requestLocales metoda zniknęła z obiektu l10n w wersji co najmniej v3.0.6. Jak można jednoznacznie zmienić ustawienia regionalne w najnowszych wersjach? – Antoine

+0

Pracuję nad łatką, która ją przywróci: https://bugzilla.mozilla.org/show_bug.cgi?id=1207120. Przepraszam za problem! –

3

pomocą API L20n JavaScript requestLocales()

/index.html

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="trackingController.js"></script> 
    <script src="l20n.js"></script> 
    <link rel="localization" href="locales/manifest.json"> 
    <script type="text/javascript"> 
    $('#langSwitch-en').click(function() { 
     document.l10n.requestLocales('en-US'); 
    }); 
    $('#langSwitch-fr').click(function() { 
     document.l10n.requestLocales('fr-FR'); 
    }); 
    </script> 
</head> 
<body> 
<!-- fix the correct language code [-de] for [-fr] --> 
    <a id="langSwitch-en" href="#">en</a>/<a id="langSwitch-fr" href="#">fr</a> 
    <h2 data-l10n-id="name"></h2> 
    <p data-l10n-id="instructions"></p> 
</body> 
</html> 
+0

Dzięki za rozwiązanie. Mały błąd funkcji jquery. Albo umieść ten skrypt na dokumencie, albo umieść skrypt na końcu ciała. Obecnie nie działa tak jak jest. – Salik