Как показать переводы с помощью Angular -Translate?

Angular -транслят в сочетании с частичным загрузчиком показывает только ключ, а не фактический перевод. Я пробовал все, но не мог найти ошибку. Ошибки не регистрируются.

Это мой код:

app.js

var app = angular.module('myapp', [
  'ngRoute',
  'appRoutes', 
  'pascalprecht.translate',
  'angularTranslate',
  'HomeCtrl'
]); 

angular.module('angularTranslate', ['pascalprecht.translate'])
  .config(function($translateProvider, $translatePartialLoaderProvider ) {
    $translateProvider.useLoader('$translatePartialLoader', {
      urlTemplate: '/languages/{lang}/{part}.json'
    });

  $translateProvider.preferredLanguage('nl');

});

Итак, шаблоны загружаются из /languages /{lang}/{part}.json

HomeCtrl.js

angular.module('HomeCtrl', []).controller('HomeController', 
  function($scope, $translate, $translatePartialLoader) {

    $translatePartialLoader.addPart('home');
    $translate.refresh();

});

В Express У меня есть этот маршрут, чтобы гарантировать, что файлы фактически возвращены, а не перенаправлены на Angular:

app.get('/languages/:lang/:part', function(req, res) {
 res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' });
});

home.json

{
    "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
}

home.html

{{ "HOMETITLE" || translate }}

И, наконец, я связал все в index.html с помощью этого порядка:

<script src="../libs/angular/angular.js"></script>
<script src="../libs/angular-route/angular-route.js"></script>
<script src="../libs/angular-resource/angular-resource.js"></script>
<script src="../libs/angular-translate/angular-translate.js"></script>
<script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>

<script src="../js/controllers/HomeCtrl.js"></script>
<script src="../js/appRoutes.js"></script>
<script src="../js/index.js"></script>

Итак, чтобы подтвердить свою проблему: вместо правильного перевода отображается только HOMETITLE. Любая помощь очень ценится!

Ответ 1

Из моего опыта работы с angular перевести здесь может быть несколько различных проблем, которые трудно определить, потому что ваша среда играет роль в этом, если бы у вас было репозиторий github, который я мог бы клонировать, я мог быть уверен.

У вас просто проблема форматирования на вашем переводе, как заявил один из других людей, {{ "HOMETITLE" | translate}} Здесь вы можете увидеть другие возможные способы форматирования перевода. Я столкнулся с проблемами, используя перевод фильтра с частичной и внешней загрузкой файлов, я бы настоятельно рекомендовал, если вы собираетесь использовать частичную загрузку, тогда вы используете только атрибуты для настройки ваших переводов, таких как

http://angular-translate.github.io/docs/#/guide/05_using-translate-directive
Ваш частичный загрузчик файлов работает в состоянии гонки, и он разрешает {{ "HOMETITLE" | перевести}}, прежде чем вы действительно получите переводы назад. Поскольку вы можете использовать переводы по умолчанию с частичной загрузкой, я бы предложил поместить перевод по умолчанию в конфигурацию вашего переводчика, чтобы убедиться, что это не так. Что-то простое, что некоторые другие пользователи описали как
```
$translateProvider.translations('nl', {
  "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
});

$translateProvider.preferredLanguage('nl');
$translateProvider.forceAsyncReload(true);
```

Добавление translateProvider.forceAsyncReload(true); до конца config заставит обновить. Однако я бы рекомендовал, чтобы вы сделали перевод немного отличным от json файла, чтобы вы могли увидеть, действительно ли это так, прежде чем добавлять перезагрузку.

Ответ 2

Как описано в документации angular -translate, вы должны заменить || на | в html файле:

{{ "HOMETITLE" | translate }}

Ниже приводится отдельный фрагмент, включающий переводы json:

var app = angular.module('myapp', [
  'pascalprecht.translate',
  'angularTranslate',
]); 

angular.module('angularTranslate', ['pascalprecht.translate'])
  .config(function($translateProvider, $translatePartialLoaderProvider ) {
    $translateProvider.translations('nl', {
      "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
    });
    $translateProvider.preferredLanguage('nl');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.2/angular-translate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-partial/2.7.2/angular-translate-loader-partial.min.js"></script>
<html ng-app="myapp">
<body>
{{ "HOMETITLE" | translate }}
</body>
</html>

Ответ 3

Проблема связана с смешиванием между конструкцией языка JavaScript и строкой шаблона AngularJS interpolate.

Рассмотрим следующее выражение JavaScript:

var foo = bar || baz;

В зависимости от значения bar выражение bar || baz вернет либо bar, либо baz. Когда bar truthy, он будет возвращен; в противном случае (когда он falsy) baz будет возвращен.

Учитывая следующее интерполяционное выражение AngularJS: {{ "HOMETITLE" || translate }}, выражение оценивается значением "HOMETITLE", так как этот строковый литерал прав.

Однако translate filter должен быть привязан к вашему шаблону HTML следующим образом {{ "HOMETITLE" | translate }}, Следовательно, фильтр translate будет передан ключ "HOMETITLE" в качестве аргумента, и он должен вернуть требуемый текст.