javascript 如何使用 Angular-Translate 显示翻译？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31730834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show translations using Angular-Translate?
提问by Andre
Angular-translate in combination with partial-loader only shows the key and not the actual translation. I've tried everything but can't seem to locate the mistake. No errors are logged.
Angular-translate 与 partial-loader 结合只显示键而不是实际的翻译。我已经尝试了一切，但似乎无法找到错误。没有错误记录。
This is my code:
这是我的代码：
app.js
应用程序.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');
});
So the templates are loaded from /languages/{lang}/{part}.json
所以模板是从 /languages/{lang}/{part}.json 加载的
HomeCtrl.js
主页控件.js
angular.module('HomeCtrl', []).controller('HomeController',
function($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('home');
$translate.refresh();
});
In Express I have this route to ensure that the files are actually returned instead of routed to Angular:
在 Express 中，我有这条路线来确保实际返回文件而不是路由到 Angular：
app.get('/languages/:lang/:part', function(req, res) {
res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' });
});
home.json
主页.json
{
"HOMETITLE" : "Geweldige Whatsapp gesprekken.",
}
home.html
主页.html
{{ "HOMETITLE" || translate }}
And finally I have linked everything in index.html using this order:
最后，我使用以下顺序链接了 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>
So to restate my problem: only HOMETITLE is displayed instead of the correct translation. Any help is greatly appreciated!
所以重申我的问题：只显示 HOMETITLE 而不是正确的翻译。任何帮助是极大的赞赏！
采纳答案by James
From my experience with angular translate a few different issues could be happening here which is hard to pin down because your environment plays a factor into this, if you had a github repo I could clone I could be certain.
根据我在 angular 翻译方面的经验，这里可能会发生一些不同的问题，这很难确定，因为您的环境对此有影响，如果您有 github 存储库，我可以克隆我可以肯定。
You just have a formatting problem on your translate like one of the other people have stated, {{ "HOMETITLE" | translate }} You can see here for other possible ways of formatting the translation. I have run into issues using the filter translation with partial and external file loading, I would strongly recommend if you are going to be using partial loading then you only use attributes for setting your translations such as
http://angular-translate.github.io/docs/#/guide/05_using-translate-directive
Your partial file loader is running into a race condition and it is resolving the {{ "HOMETITLE" | translate }} before you actually get the translations back. Since you can use default translations with partial loading I would suggest putting in a default translation in your translate provider config to make sure that is not the case. Something as simple as what some of the other users have described as
$translateProvider.translations('nl', { "HOMETITLE" : "Geweldige Whatsapp gesprekken.", }); $translateProvider.preferredLanguage('nl'); $translateProvider.forceAsyncReload(true);
您只是在翻译时遇到了格式问题，就像其他人所说的那样，{{ "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);
Adding translateProvider.forceAsyncReload(true); to the end of the config will force a refresh. However I would recommend that you make the translation slightly different then the json file so you can see if that is the case before adding the force reload.
添加 translateProvider.forceAsyncReload(true); 到配置的末尾将强制刷新。但是，我建议您使翻译与 json 文件略有不同，以便您可以在添加强制重新加载之前查看情况是否如此。
回答by mpromonet
As described in the angular-translate documentationyou should replace ||with |in the html file :
如angular-translate 文档中所述，您应该在 html 文件中替换 ||为|：
{{ "HOMETITLE" | translate }}
Hereafter a standalone snippet including the json translations :
此后包含 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>回答by Igwe Kalu
The issue is due to a mixup between a JavaScript language construct and an AngularJS template string interpolateexpression.
该问题是由于 JavaScript 语言构造和 AngularJS 模板字符串插值表达式之间的混淆所致。
Consider the following JavaScript expression:
考虑以下 JavaScript 表达式：
var foo = bar || baz;
Depending on the value of bar, the expression bar || bazwill return eitherbaror baz. When baris truthy, it will be returned; otherwise (when it's falsy) bazwill be returned.
根据价值bar，表达式bar || baz将返回要么bar或baz。当bar是truthy 时，它会被返回；否则（当它为假时）baz将被返回。
Given the following AngularJS interpolate expression: {{ "HOMETITLE" || translate }}, the expression evaluates to the value "HOMETITLE", since that string literal is truthy.
给定以下 AngularJS 插值表达式: {{ "HOMETITLE" || translate }}，该表达式的计算结果为 value "HOMETITLE"，因为该字符串文字是真实的。
However, the translatefiltershould be bound to your HTML template as follows {{ "HOMETITLE" | translate }}. Hence, the translatefilter will be passed the key 'HOMETITLE'as an argument and it should return the required text.
但是，translate过滤器应如下绑定到您的 HTML 模板{{ "HOMETITLE" | translate }}。因此，translate过滤器将键'HOMETITLE'作为参数传递，它应该返回所需的文本。
