Menu
I started using angular-translate. Works great!
But a translated character � is displayed for characters with umlaut or accent or ... (like ü or ú or ñ). These same character values are displayed correctly in HTML text and as AngularJS variables.
Here's a sample output. The output for html text and angular variable display correctly. The results from $translate filter and directive don't display the correct umlaut character.
html text - Und sie untersützt mehrere Sprachen!
angular variable - Und sie untersützt mehrere Sprachen!
$translate filter - Und sie unters�tzt mehrere Sprachen!
$translate directive - Und sie unters�tzt mehrere Sprachen!
Here's the code:
'use strict';
var translations =
{
"TEST_DE": "Und sie untersützt mehrere Sprachen!",
"TEST_ES": "Menú Señor"
};
angular.module('testApp', ['testApp.controllers', 'pascalprecht.translate'])
.config(['$translateProvider', function($translateProvider) {
$translateProvider.translations({
TEST_DE: "Und sie untersützt mehrere Sprachen!",
TEST_ES: "Menú Señor"
});
}]);
angular.module('testApp.controllers', ['ui.bootstrap']);
Here's the HTML:
<!doctype html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="utf-8">
<title>Test angular-translate</title>
</head>
<body ng-controller="testAppController">
<!-- Declare the view/controller router -->
<div ng-view></div>
<!-- angular files -->
<script src="angular.js"></script>
<script src="angular-translate.js"></script>
<script src="ui-bootstrap-tpls-0.4.0.js"></script>
<!-- Application routing file -->
<script src="app.js"></script>
<!-- Application Controller -->
<script src="testAppController.js"></script>
<!-- Test translations -->
<br />
html text - Und sie untersützt mehrere Sprachen!
<br />
angular variable - {{ testPhraseDE }}
<br />
$translate filter - {{ 'TEST_DE' | translate }}
<br />
$translate directive - <a translate="TEST_DE"> </a>
<br />
<br />
html text - Menú Señor
<br />
angular variable - {{ testPhraseES }}
<br />
$translate filter - {{ 'TEST_ES' | translate }}
<br />
$translate directive - <a translate="TEST_ES"> </a>
</body>
</html>
357
Quick question but worth asking (as I always do this mistake :) ) are you sure that your JS file is saved and served by your server in an UTF-8 format? Because nothing seems wrong with your code. I even made it work without the � here. Hope it's only that.
166
In my case the issue was that Eclipse STS was saving the JSON file with no UTF-8 format. I used Notepad++ to save it as JSON file. Now the accents and special characters are displayed correctly in the directive.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
