W mojej aplikacji wykorzystuję bibliotekę angular-gettext w celu zapewnienia jej wsparcia dla I18N. Dzięki niej przygotowanie wielojęzykowej aplikacji w AngularJS jest w miarę proste. Biblioteka ta oferuje wiele możliwości oznaczania tekstu jako “do przetłumaczenia”. Istnieją jednak pewne pułapki o których więcej informacji znajdziesz właśnie w tym wpisie.

Custom annotations w angular-gettext

Mechanizm custom annotations pozwala nam na zdefiniowanie własnych lub wbudowanych atrybutów HTML które zostaną rozpoznane jako “do przetłumaczenia” przez narzędzie nggettext-extract. Jak używać mechanizmu custom annotations pisałem w poście opisującym angular-gettext. Jest to metoda określana jako optymalna dla tłumaczenia tekstów zawartych w atrybutach. Ma jednak swoje ograniczenia. Załóżmy że mamy taki kod:

<foo bar="abc">

w wyniku nggettext_extract otrzymamy:

msgid "abc"

tak samo dla:

<foo bar="abc"></foo>

ale dla:

<foo bar="abc">xyz</foo>

otrzymamy:

msgid "xyz"

Jak widać mechanizm ten nie radzi sobie w niepustymi elementami HTML. W przypadku gdy musimy przetłumaczyć atrybut takiego elementu należy skorzystać z filtra translate:

<foo bar="{{'abc'|translate }}">xyz</foo>

Problem ten był już zgłaszany opiekunom biblioteki angular-gettext i czeka na rozwiązanie.