[英]Angular translate not working between 2 controllers
我想在我的Angular應用程序中使用i18n和i10n。
我讀到Angular-translate可以幫助解決這個問題,但是,它對我不起作用。
在我的index.html中:
<!DOCTYPE html>
<html ng-app="eApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../common/css/style.css" />
<title></title>
</head>
<body ng-controller="AppCtrl">
<div id="container" ng-view></div>
<!--- Libs Js files --->
<script type="text/javascript" src="../vendor/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../vendor/angularjs/angular-route.min.js"></script>
<script type="text/javascript" src="../vendor/angularjs/angular-translate.min.js"></script>
</body>
</html>
在我的eApp.js中:
var eApp = angular.module('elbitApp', ['ngRoute', 'ui.bootstrap', 'config', 'pascalprecht.translate']);
// configure our routes
eApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
// route for the home page
.when('/c', {
templateUrl: 'c/partials/c.html',
controller: 'CController'
})
// route for the about page
.when('/de', {
templateUrl: 'd/partials/dE.html',
controller: 'DEController',
resolve: {
data: function (DDataService) {
return DDataService.loadData().then(function (response) {
return response.data;
});
}
}
})
// route for the contact page
.when('/di', {
templateUrl: 'd/partials/di.html',
controller: 'DIController',
resolve: {
data: function (DDataService) {
return DDataService.loadData().then(function (response) {
return response.data;
});
}
}
}).otherwise({
redirectTo: '/di'
});
}]).config(["$httpProvider",
function ($httpProvider) {
// Configure the $httpProvider to parse date with date transformer
$httpProvider.defaults.transformResponse.push(function (responseData) {
convertDateStringsToDates(responseData);
return responseData;
});
}]).config(["$translateProvider",
function ($translateProvider) {
$translateProvider.translations('en', {
"TITLE": 'Hello',
"FOO": 'This is a paragraph.',
"BUTTON_LANG_EN": 'english',
"BUTTON_LANG_DE": 'german'
});
$translateProvider.translations('de', {
"TITLE": 'Hallo',
"FOO": 'Dies ist ein Paragraph.',
"BUTTON_LANG_EN": 'englisch',
"BUTTON_LANG_DE": 'deutsch'
});
$translateProvider.preferredLanguage('en');
}]);
// main controller that catches resolving issues of the other controllers
eApp.controller('AppCtrl', function ($rootScope) {
$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
alert("Cant resolve the request of the controller "); //TODO: add URL + additional data.
})
});
在這個文件中,我定義了我的應用並添加了$translateProvider
和兩個詞典。
后來我到了deController.js
:
eApp.controller('DispatcherEventsController', ['$scope', '$route', '$translate',
function($scope, $route, $translate){
var data = $route.current.locals.data;
$scope.title = $translate.instant("FOO");
$scope.switchLanguage = function(languageKey){
$translate.use(languageKey);
};
}]);
在de.html
我添加了一個帶有FOO
的h1
標簽,點擊一下我想改為德語:
<h1>{{title |translate}}</h1>
<h1 translate="{{title}}"></h1>
<button type="button" id="searchButton" class="btn btn-default" ng-click="switchLanguage('de')">German</button>
我沒有遇到任何問題,但沒有任何反應。 我預計英文標題將轉換為德文標題。
我能做些什么來完成這項工作?
這對我來說很有用。 這是一個jsFiddle DEMO 。
在這種情況下,您希望將$ scope.title與翻譯鍵“FOO”綁定。
您應該在switchLanguage函數中動態更改$ scope.title的值。 然后視圖將相應更新。
//default value
$scope.title = $translate.instant("HEADLINE");
$scope.switchLanguage = function(key){
$translate.use(key);
$scope.title = $translate.instant("HEADLINE");
}
在我看來,使用翻譯密鑰可能比范圍數據綁定更好。 您不必手動保持密鑰的值。
<h1>{{'FOO' | translate}}</h1>
根據您提供的錯誤信息,也許您可以檢查控制器中是否存在任何拼寫錯誤語法。
應該
$translate.use(languageKey)
不
$translate.uses(languageKey)
雖然與您的問題沒有直接關系 - 您必須記住在translations.js文件中設置首選語言,或者您定義鍵值轉換的名稱。 否則它只會默認為密鑰。
...
GREETING: 'Hello World!',
...
$translateProvider.preferredLanguage('en');
沒有這一行,當這樣做時:
<h2>{{'GREETING'|translate}}</h2>
看起來只是問候而不是'Hello World'。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.