Angular-Translate:指定每个翻译元素的语言

Question

我正在使用angular-translate来翻译我的Angular应用程序.到目前为止这种方法运作良好.

现在我要求用另一种语言翻译页面的某些部分而不是页面的其他部分.

特别:

• 页面的shell(导航,标题等)应该
  根据我用`$ 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);
    };
});