javascript - Angular translate not working between 2 controllers

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.

In my index.html:

    <!DOCTYPE html>
    <html ng-app="eApp">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../mon/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../mon/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>

In my 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.
})
});

In this file I defined my app and added the $translateProvider and two dictionaries.

Afterwards I got to my 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);
    };
}]);

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?

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.

In my index.html:

    <!DOCTYPE html>
    <html ng-app="eApp">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../mon/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../mon/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>

In my 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.
})
});

In this file I defined my app and added the $translateProvider and two dictionaries.

Afterwards I got to my 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);
    };
}]);

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?

Share Improve this question edited Jun 11, 2014 at 7:47 István 5,12710 gold badges40 silver badges67 bronze badges asked Jun 11, 2014 at 7:42 Aviade 2,0974 gold badges27 silver badges49 bronze badges

I got an error: TypeError: Object function has no method 'uses'. The app is crushed – Aviade Commented Jun 11, 2014 at 7:51

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

It works well for me. Here is a jsFiddle DEMO.

In this case, you want to bind $scope.title with translation key "FOO".

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");
}

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.

Should be

$translate.use(languageKey)

Not

$translate.uses(languageKey)

Though not directly related to your question - you must remember to set the preferred language in the translations.js file, or whatever its name is that you define your key-value translations. Otherwise it will just default to whatever the key is.

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

Without this line, when doing this:

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

Would appear as just GREETING instead of the 'Hello World.'

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular translate not working between 2 controllers - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)