Angular-Translate: укажите язык для каждого переведенного элемента

Question

Я использую angular-translate для перевода моего приложения Angular. Пока это хорошо работает.

Теперь у меня есть требование перевести некоторые части страницы на другой язык, чем остальная часть страницы.

В частности:

• Оболочка страницы (навигация, заголовок и т. Д.) Должна быть переведена
  в соответствии с языком, который я установил с помощью `$translate.use(lang).

• Некоторый контент доступен только на определенном языке. Следовательно
  раздел страницы, который показывает, что содержание должно быть
  перевод на язык, соответствующий содержанию.

Пример:

<!--v this should be English -->
<div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong translate>ALERT</strong>
</div>
<!--^ this should be English -->

<div class="panel panel-default">
    <!--v this should be English -->
    <div class="panel-heading">
        <h3 class="panel-title" translate>TITLE</h3>
    </div>
    <!--^ this should be English -->
    <!--v this should be German-->
    <div class="panel-body">
        <label class="control-label" translate="DESCRIPTION" translate-values="{ p0: someParameter }"></label>
        [...]
    </div>
    <!--^ this should be German-->
</div>

Также мне нужна замена переменной в механизме перевода, так как он пока работает с angular-translate

До сих пор я не смог найти элегантного решения для этих требований. Спасибо за любую помощь, советы или альтернативные решения.

Answer 1

Вы можете создать собственный асинхронный загрузчик, как описано здесь.

Вы могли бы установить data ниже путем объединения языков.

var app = angular.module('myModule', []);

app.config(function ($translateProvider) {
  $translateProvider.useLoader('customLoader', {
     // if you have some custom properties, go for it!
  });
});

app.factory('customLoader', function ($http, $q) {
    // return loaderFn
    return function (options) {
        var deferred = $q.defer();
        // do something with $http, $q and key to load localization files

        var data = {
            'TEXT': 'Fooooo'
        };

        return deferred.resolve(data);
        // or
        return deferred.reject(options.key);
    };
});

Answer 2

Вы можете использовать $translatePartialLoader с пользовательской функцией предоставления URL-адреса шаблона:

$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: function(part, lang) {
    if (part.indexOf('json') > -1) {
      return 'translations/' + part;
    }
    return 'translations/' + part + '_' + lang + '.json';
  }
});

Загрузите контент, который нужно перевести в соответствии с $translate.use, используя

$translatePartialLoaderProvider.addPart('content');

Таким образом, файл content_lang.json будет загружен в соответствии с предпочтениями языка пользователя. Для контента с фиксированным языком загрузите точный файл

$translatePartialLoaderProvider.addPart('fixed_de.json');

Этот файл будет загружен всегда, игнорируя выбор языка пользователя.