2013-12-16 17 views
12

Ho iniziato a usare angular-translate. Funziona alla grande!angular-translate non visualizza correttamente l'accento di caratteri o la giustapposizione

Ma un carattere tradotto viene visualizzato per i caratteri con umlaut o accento o ... (come ü o ú o ñ). Questi stessi valori di carattere sono visualizzati correttamente nel testo HTML e come variabili AngularJS.

Ecco un esempio di output. L'output per il testo html e la variabile angolare viene visualizzato correttamente. I risultati del filtro e della direttiva $ translate non mostrano il carattere di umlaut corretto.

html text - Und sie untersützt mehrere Sprachen!

variabile angolare - Und sie untersützt mehrere Sprachen!

$ tradurre filtro - Und sie unters tzt mehrere Sprachen!

$ tradurre direttiva - Und sie unters tzt mehrere Sprachen!

Ecco il codice:

'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']); 

Ecco il codice 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> 

risposta

14

Domanda rapida, ma vale la pena chiedere (come faccio sempre questo errore :)) sei sicuro che il file JS viene salvato e servito dal tuo server in un formato UTF-8? Perché niente sembra sbagliato con il tuo codice. L'ho persino fatto funzionare senza il here. Spero sia solo questo.

+0

Questo è esattamente il problema. Grazie per aver provato il codice e aver confermato che era tutto ok per te. Ho controllato e convertito il codice in UTF-8, ri-inserito le stringhe, e tutto va bene. – user3108158

+2

Ho lo stesso problema, ma non riesco a capire come risolverlo, puoi spiegarlo per favore ... – Rohit

+3

Per chi cerca maggiori informazioni, ho risolto questo problema utilizzando Notepad ++ per convertire il file stesso nella codifica UTF-8. Nel mio caso, era un file json che ho caricato, ma potreste provare qualunque file contenga le vostre traduzioni. Non sono richieste impostazioni del server. Grazie per avermi indicato nella giusta direzione! – adamdport

1

Nel mio caso il problema era che Eclipse STS stava salvando il file JSON senza formato UTF-8. Ho usato Notepad ++ per salvarlo come file JSON. Ora gli accenti e i caratteri speciali sono visualizzati correttamente nella direttiva.