Angular转换不能在两个控制器之间工作

Angular translate not working between 2 controllers

本文关键字：两个 控制器 之间 工作 转换 不能 Angular      更新时间：2023-09-26

我想在我的Angular应用中使用i18n和i10n。

我读到Angular-translate可以帮助解决这个问题，但是，它不适合我。

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和两个字典。

之后我得到了我的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。标题翻译键"FOO"

你应该改变$scope的值。在switchLanguage函数中动态地显示标题。然后视图将相应地更新。

//default value
$scope.title = $translate.instant("HEADLINE");
$scope.switchLanguage = function(key){
    $translate.use(key);
    $scope.title = $translate.instant("HEADLINE");
}

在我看来，也许使用翻译键是比范围数据绑定更好的方法。你不需要手动维护key的值

<h1>{{'FOO' | translate}}</h1>

根据你提供的错误信息，也许你可以检查一下你的控制器是否有拼写错误。

应该

$translate.use(languageKey)
不

$translate.uses(languageKey)

虽然与您的问题没有直接关系，但您必须记住在translations.js文件中设置首选语言，或者无论它的名称是什么，都可以定义键值翻译。否则，它将默认为键值。

... 
GREETING: 'Hello World!',
...
$translateProvider.preferredLanguage('en');

如果没有这一行，执行以下操作:

<h2>{{'GREETING'|translate}}</h2>

将显示为GREETING而不是'Hello World '

相关文章：