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

Question

我在使用 Django 在 AngularJS 部分中提供的翻译服务时遇到问题。似乎 Django 只在我的网站第一次加载时才翻译部分内容。截至目前，我正在为 Django 提供 index.html，然后使用 ng-view 指令加载每个视图。我让 django 和 angular 路由工作得很好。在我的 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),
)

在我的里面 angular 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 中更改语言？

Answer 1

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

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

这解决了我的问题。

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

Dealing with Django translation inside AngularJS partials (ng-view)

django

multilingual

translation

angularjs