2016-08-09 3 views
1

AngularJS 부분 중 장고가 제공하는 번역 서비스에 문제가 있습니다. Django는 처음으로 내 웹 사이트가로드 될 때만 부분적으로 내용을 번역하고있는 것 같습니다. 현재로서는 index.html에 Django를 제공하고 ng-view 지시어로 각보기를로드합니다. 내가 장고와 각도 라우팅 멋지게 작동 있어요. 내 장고 템플릿 폴더 안에 this structure이 있습니다. 이 파일들은 각각 Django가 번역 한 일부 내용을 담은 정규 html 템플릿입니다.AngularJS 부분 (장시도) 내 장고 번역 처리

내 장고 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의 콘텐츠는 그대로 유지됩니다. 내가 독일에 변경하는 경우 그래서 내 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> 
<!-- [...] --> 

내가 독일에 브라우저 언어를 변경하는 경우, 모든 내용이 독일에 렌더링 무엇 추측하지만 난 localhost:8000/en/#/ 또는 localhost:8000/es/#/, 단지를 방문하는 경우 ng-view 외부의 콘텐츠가 변경됩니다. 나는 여기서 무슨 일이 일어나고 있는지 이해하지 못한다. 브라우저 언어가 아닌 URL 언어에 따라 ng-view에서 언어를 변경하려면 어떻게해야합니까?

답변

0

좋아, 잘 했어. Angular는 Accept-Language 헤더를 한 번만 설정하므로 브라우저의 언어를 고려하여 ng-view의 내용은 한 번만 번역됩니다. 내 문제를 해결

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

을 : 그래서 내 app.js 구성에서 나는 URL에서 언어를 저장하고 모든 요청에 ​​Accept-language 헤더를 설정했다.