Wie wird der eingegebene Textwert (datepicker) dynamisch mit angular-translate übersetzt?

Ich benutze angular-translate, um i18n zu meiner Anwendung zu liefern, ich bin in der Lage, Etiketten, Button-Text usw. richtig zu übersetzen. Das Problem, mit dem ich konfrontiert bin, ist, wenn ich versuche, das Datum entsprechend dem ausgewählten Sprachgebietsschema zu ändern. Das Datum wird aus einer Datumsauswahl ausgewählt.Wie wird der eingegebene Textwert (datepicker) dynamisch mit angular-translate übersetzt?

das Datum wird in ein Eingabeelement ausgewählt:

<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'select_date'|translate:{date:date} }}"/>

die Platzhalter Übersetzung funktioniert perfekt, aber keine Änderung passiert Datumsformat, wenn ich die Sprache ändern. Ich habe eine Plunkr erstellt, die das aktuelle Szenario beschreibt.

Plunker Link

vorschlagen Bitte eine Art und Weise, in der ich eingefügte Werte übersetzen, oder Text in Formularen. Ich würde auch gerne wissen, wie man das Flimmern von Schlüsselwerten kurz vor dem Laden der Seite überwinden kann.

Quelle

2016-10-11 Rishabh

Kennen Sie schon [diese] (http://stackoverflow.com/questions/29742365/how-to- translate-a-date-objekt-using-angular-translate)? – Corporalis

ja ich habe das gesehen, aber das nutzt Moment js und ich werde alle Locales nur für die Daten laden müssen, die ich verwende, was ich nicht für die Verwendung – Rishabh

bin Hier ist eine ähnliche Implementierung in einer Richtlinie http: // jsfiddle.net/7y3y9nq7/ Angular translate haben einige Ereignisse; Sie können es verwenden, für Änderungsmodell Wert https://angular-translate.github.io/docs/#/guide/18_events –

Italienisch locale hinzufügen, kopiert ich es von http://forum.html.it/forum/showthread/t-2912577.html:

$.fn.datepicker.dates['it'] = { 
    days: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"], 
    daysShort: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"], 
    daysMin: ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"], 
    months: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"], 
    monthsShort: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"], 
    today: "Oggi", 
    clear: "Cancella", 
    weekStart: 1, 
    format: "dd/mm/yyyy" 
};

convert Karte hinzufügen für Sprachcodes von en_EN Format en:

// language codes convertor map 
var convertorMap = { 
    'en_US': 'en', 
    'it_IT': 'it' 
};

In Ihrem Sprachumschalter Funktion, entfernen Sie den aktuellen Datumszeiger und initialisieren Sie einen neuen mit neuer Sprache, stellen Sie sicher, dass Sie die Daten aktualisieren e in neuem Format auch:

$scope.switchLanguage = function (key) { 
    var dp = $('#datePicker'); 
    // get current date 
    var currentDate = dp.datepicker('getDate'); 

    // update datepicker with new locale 
    dp.datepicker('remove'); 
    dp.datepicker({ 
    autoclose: true, 
    language: convertorMap[key] 
    }); 
    // restore current date according to the new locale 
    dp.datepicker('update', currentDate); 

    $translate.use(key); 
};

nur Ansicht zu zeigen, wenn Übersetzung fertig sein wird, Ihr Wrapper-Element ändern (I verwendet <body>) aussehen:

<body ng-controller="Ctrl" class="ng-hide" ng-show="showView"> 
    ..... 
</body>

und in Ihrem Controller:

// will be fired when the service is "ready" to translate (i.e. loading 1st language) 
$translate.onReady(function() { 
    $scope.showView = true; 
});

ng-Modell Richtlinie über jQuery Datepicker picker~~POS=HEADCOMP tut nichts, so dass ich es entfernt, und adde

$('#datePicker').datepicker({ 
    autoclose: true 
}) 
// update ng model 
.on('changeDate', function(e) { 
    $timeout(function() { 
    $scope.date = $('#datePicker').datepicker('getUTCDate'); 
    }); 
});

wenn Sie sehen, in der Konsole Meldung wie:.

pascalprecht.translate $ translateSanitization: d ng-Modell Update-Code datepicker Funktion initial keine sanitization Strategie ist konfiguriert. Dies kann schwerwiegende Auswirkungen auf die Sicherheit haben.

gesagt wird, in der nächsten Versionen behoben werden: https://github.com/taigaio/taiga-front/issues/778

Plunker: http://plnkr.co/edit/EGtHPG?p=preview

Quelle

2016-10-15 23:03:25 Andriy

Vielen Dank für eine schöne und detaillierte Lösung Für jeden, der translatePartialLoader verwendet, muss verweisen auf http://StackOverflow.com/questions/32123924/angular-translate-fouc-issues, um Probleme im Zusammenhang mit Flickern von nicht übersetztem Text zu lösen – Rishabh

Siehe auch http://stackoverflow.com/questions/37247083/how-to-load-angular-translate-before- any-ui-is-displayed-with-ui-router-resolve zur Lösung von FOUC-Problemen. – Rishabh

Wie wird der eingegebene Textwert (datepicker) dynamisch mit angular-translate übersetzt?

Antwort

Verwandte Themen