Angular-Translate：为每个翻译的元素指定语言答案

【问题标题】：Angular-Translate: Specify language per translated elementAngular-Translate：为每个翻译的元素指定语言
【发布时间】：2015-05-26 21:34:28
【问题描述】：

我正在使用 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>

我还需要在翻译机制中使用variable replacement，因为它目前正在使用 angular-translate

到目前为止，我找不到满足此要求的优雅解决方案。感谢您提供任何帮助、提示或替代解决方案。

【问题讨论】：

标签： angularjs angular-translate

【解决方案1】：

您可以按照here 的描述构建自定义异步加载器。

您可以通过组合语言在下面设置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);
    };
});

【讨论】：

【解决方案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');

加载此文件时始终忽略用户语言选择。

【讨论】：