角翻译不是2个控制器之间的工作 [英] Angular translate not working between 2 controllers
问题描述
我想用国际化和i10n在我的角度应用程序。
I would like to use i18n and i10n in my Angular app.
我读到角翻译能帮助您，但是，它并没有为我工作。
I read that Angular-translate can help with this, however, it doesn't work for me.
在我的index.html：
In my 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 和两个字典。
In this file I defined my app and added the $translateProvider and two dictionaries.
后来我得到了我的 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 我添加了一个 H1 与 FOO ，并在点击我想改变德国：
In de.html I added a h1 tag with FOO and in a click I would like to change to German:
<h1>{{title |translate}}</h1>
<h1 translate="{{title}}"></h1>
<button type="button" id="searchButton" class="btn btn-default" ng-click="switchLanguage('de')">German</button>
我没有得到任何的问题，但没有任何反应。我预计，该英文名称将被转换为德国冠军。
I don't get any problem, but nothing happens. I expected that the English title will be converted to German title.
我能做些什么，使这项工作？
What can I do to make this work?
推荐答案
这很适合我。这里是一个的jsfiddle演示。
It works well for me. Here is a jsFiddle DEMO.
在这种情况下，要绑定$ scope.title与翻译键FOO。
In this case, you want to bind $scope.title with translation key "FOO".
您应该在 switchLanguage 的功能改变$ a的值scope.title动态。然后查看将随之更新。
You should change the value of $scope.title dynamically in the switchLanguage function. Then view will be updated accordingly.
//default value
$scope.title = $translate.instant("HEADLINE");
$scope.switchLanguage = function(key){
$translate.use(key);
$scope.title = $translate.instant("HEADLINE");
}
在我看来，也许用翻译键比范围数据绑定一个更好的办法。您不必手动maitain键的值。
In my opinion, maybe use translation key is a better way than scope data binding. You don't have to maitain the value of key manually.
<h1>{{'FOO' | translate}}</h1>
根据您所提供的错误味精，也许你可以检查是否有在你的控制器的任何错字语法。
According to the error msg you provided, maybe you could check if there is any typo syntax in your controller.
应
$translate.use(languageKey)
不可以
$translate.uses(languageKey)
这篇关于角翻译不是2个控制器之间的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
