Angular.translate не работает в контексте <br> в HTML
Я работаю с AngularJS и уже несколько дней пытаюсь реализовать переводы с помощью angular.translate Паскаля Пречта. В целом это работает следующим образом:
app.js
angular.module('app', ['ionic', 'config', 'pascalprecht.translate'])
.config(function ($translateProvider)
{
$translateProvider.translations("en",
{
"GAME_ERROR": "Some error description!",
"GAME_VALUES": "You got something",
});
$translateProvider.preferredLanguage("en");
})
game.html
<th colspan = "2" translate = "GAME_ERROR"><br translate = "GAME_VALUES"></th>
При записи переменной "GAME_VALUES" эта не отображается. Работа с <span> тоже не помогает:
<th colspan = "2" translate = "GAME_ERROR"><br><span translate = "GAME_VALUES"></span></th>
В другом месте у меня такая же конструкция - там обходной путь с <span> работает.
Что нужно сделать, чтобы получить этот набор?
Спасибо. <br> и никакого внутреннего текста - хорошо. Но почему вместо этого <span> не помогает? По поводу $translateProvider.preferredLanguage исправил опечатку.
Когда вы используете директиву translate в элементе TH, дочерние элементы будут перезаписаны директивой. Поэтому единственное, что вы должны увидеть, это «Некоторое описание ошибки!». Весь innerHTML элемента будет перезаписан текстом. Если вы хотите, чтобы оба текста располагались рядом, используйте фильтр.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы поместите перевод внутри элемента html, все дочерние элементы будут перезаписаны значением перевода. Вместо этого вы можете попробовать фильтр перевода:
<th colspan = "2">{{ 'GAME_ERROR' | translate}} <br> {{ 'GAME_VALUES' | translate}}</th>
или создайте два элемента span:
<th colspan = "2"><span translate = "GAME_ERROR"></span><br><span translate = "GAME_VALUES"></span></th>
Отлично. Решением были 2 пролета :-)
BR не имеет внутреннего текста, а в остальном у вас нет перевода для языка "en".