处理 AngularJS 部分中的 Django 翻译（ng-view）答案

【问题标题】：Dealing with Django translation inside AngularJS partials (ng-view)处理 AngularJS 部分中的 Django 翻译（ng-view）
【发布时间】：2016-08-09 21:15:58
【问题描述】：

我在使用 AngularJS 部分中的 Django 提供的翻译服务时遇到问题。似乎 Django 仅在我的网站第一次加载时才翻译部分内容。到目前为止，我正在为 Django 提供index.html，然后使用 ng-view 指令加载每个视图。我让 django 和角度路由工作得很好。在我的 Django 模板文件夹中，我有 this structure。这些文件中的每一个都只是一个常规的 html 模板，其中一些内容由 Django 翻译。

我的 django urls.py:

urlpatterns += i18n_patterns(
    url(r'^$', views.homepage, name='index'),
    url(r'^views/page-home.html/$', views.homeView),
    url(r'^views/(?P<page>[-\w]+.html)/$', views.angularViews),
    url(r'^(?P<path>.*)/$', views.angularRedirector),
)

在我的角度app.js：

$routeProvider
    // Load home by default
    .when('/', {
        templateUrl: 'views/page-home.html',
        controller: 'homeController'
    })

    // home page
    .when('/home', {
        templateUrl: 'views/page-home.html',
        controller: 'homeController'
    })

    // contact page
    .when('/contact', {
        templateUrl: 'views/page-contact.html',
        controller: 'contactController'
    })

    // otherwise
    .otherwise({ 
        redirectTo: '/' 
    });

我的index.html 结构如下所示：

<!-- index.html -->
{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <!-- Head stuff [...] -->
</head>

<body ng-app="app" ng-controller="controller">
    <!-- some content -->
    <h1>{% trans "Hello world" %}</h1>

    <!-- Views are injected here -->
    <div class="page {$ pageClass $}" ng-view></div>
</body>
</html>

其中一个模板，例如page-home.html 看起来像这样：

<!-- page-home.html -->
{% load static %}
{% load i18n %}
<!-- more content -->
<h2>{% trans "Goodbye World" %}</h2>

我目前使用 3 种语言（英语、西班牙语和德语）。如果我加载localhost:8000，Django 将自动重定向到localhost:8000/es/#/，因为西班牙语是我的默认浏览器语言。所有内容都会很好地呈现，所以 DOM 看起来像这样：

<!-- [...] -->
<body ng-app="app" ng-controller="controller">
    <!-- some content -->
    <h1>Hola mundo</h1>
    <!-- Views are injected here -->
    <div class="page page-home" ng-view>
        <!-- more content -->
        <h2>Adiós mundo</h2>
    </div>
</body>
<!-- [...] -->

这就是事情变得棘手的地方。如果我转到localhost:8000/de/#/ 或localhost:8000/en/#/，只是直接在index.html 中的内容将被翻译成当前语言，而ng-view 中的内容将保持不变。因此，如果我更改为 Deutsche，我的 DOM 将呈现如下：

<!-- [...] -->
<body ng-app="app" ng-controller="controller">
    <!-- some content -->
    <h1>Hallo welt</h1>
    <!-- Views are injected here -->
    <div class="page page-home" ng-view>
        <!-- more content -->
        <h2>Adiós mundo</h2>
    </div>
</body>
<!-- [...] -->

猜猜看，如果我将浏览器语言更改为 Deutsche，那么所有内容都会呈现给 Deutsche，但如果我访问 localhost:8000/en/#/ 或 localhost:8000/es/#/，则只有 ng-view 之外的内容会发生变化。我不明白这里发生了什么。如何根据 url 语言而不是浏览器语言在 ng-view 中更改语言？

【问题讨论】：

标签： angularjs django translation multilingual

【解决方案1】：

好的，我搞定了。事实证明，Angular 只会设置一次 Accept-Language 标头，因此考虑到浏览器的语言，ng-view 中的内容只会翻译一次。因此，在我的 app.js 配置中，我必须从 url 存储语言并在每个请求上设置 Accept-Language 标头：

app.config(["$httpProvider", function($httpProvider) {
    var language = window.location.pathname.split('/')[1];
    $httpProvider.defaults.headers.common["Accept-Language"] = language;
}]);

这解决了我的问题。

【讨论】：