JS中的Angular Translate同步问题答案

【问题标题】：Angular Translate synchronicity issue in JSJS中的Angular Translate同步问题
【发布时间】：2015-10-06 10:52:55
【问题描述】：

Angular Translate 非常适合作为视图中的过滤器。我正在将 angular-translate-loader-static-files 与 locale-en.json 等外部文件一起使用。

问题是当我尝试做这样的事情时：

var placeholder = $translate('placeholder.NAME')
                    .then(function (translatedValue) {
                        return translatedValue;
                    });

我总是得到一个承诺，在 UI 中它显示为 {} 而不是英文等单词 NAME。

在JS中使用angular-translate翻译的正确方法是什么？

编辑：试了一下，得到如下结果（还是没解决）

 var placeholder = '';
                $translate('placeholder.NAME').then(function (translatedValue) {
                    console.log(translatedValue);
                    placeholder = translatedValue;
                }, function(err){
                    console.log(err); // returns placeholder.NAME
                });
                console.log(placeholder);  // returns empty string

【问题讨论】：

标签： javascript angularjs internationalization angular-translate

【解决方案1】：

var placeholder = '';
$translate('placeholder.NAME').then(function (translatedValue) {
  placeholder = translatedValue;
});

【讨论】：

@itamar 这取决于你最终如何使用变量placeholder。应该是$scope.placeholder。
其实是用来放到作用域数组中的，所以我把它作为一个局部变量来保存。
@itamar 我明白了。然后你应该在回调中这样做。
好的，所以我尝试了您的解决方案，这就是我得到的：[为可读性提出问题]
@itamar 那不行吗？

【解决方案2】：

我建议让您的控制器不受翻译逻辑的影响，并直接在您的视图中翻译您的字符串，如下所示：

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

【讨论】：

是的。关键是这已经奏效了——我需要在显示数据之前以控制器的方式进行翻译。

【解决方案3】：

您可以使用instant 函数在没有承诺的情况下获取值：

var translation = $translate.instant('placeholder.NAME');

但是，这不会等待翻译文件被加载。您应该确保在加载翻译文件后调用它。

【讨论】：

【解决方案4】：

来自网站http://angular-translate.github.io/docs/#/guide/03_using-translate-service635

app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
$translate(['HEADLINE', 'PARAGRAPH', 'NAMESPACE.PARAGRAPH']).then(function (translations) {
$scope.headline = translations.HEADLINE;
$scope.paragraph = translations.PARAGRAPH;
$scope.namespaced_paragraph = translations['NAMESPACE.PARAGRAPH'];
});
}]);

【讨论】：