Jak dynamicznie przetłumaczyć wartość tekstu wejściowego (datepicker) za pomocą translacji kątowej?

Używam translacji kątowej, aby zapewnić i18n do mojej aplikacji, jestem w stanie poprawnie przetłumaczyć etykiety, tekst przycisku itd. Problem, który napotykam, polega na tym, że próbuję zmienić datę zgodnie z wybranymi ustawieniami językowymi. Data jest wybierana z selektora daty.Jak dynamicznie przetłumaczyć wartość tekstu wejściowego (datepicker) za pomocą translacji kątowej?

data jest wybrany do elementu wejściowego:

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

tłumaczenie zastępczy działa idealnie, ale nie zdarza się zmiana formatu daty, kiedy zmiany języka. Stworzyłem plunkr opisujący obecny scenariusz.

Plunker Link

Proszę zaproponować sposób, w jaki Mogę przetłumaczyć wstawione wartości lub tekst w formach. Chciałbym również wiedzieć, jak przezwyciężyć migotanie kluczowych wartości tuż przed załadowaniem strony.

Źródło

2016-10-11 Rishabh

Widziałeś [to] (http://stackoverflow.com/questions/29742365/how-to- przetłumaczyć-a-date-object-using-angle-translate)? – Corporalis

Tak, widziałem to, ale to wykorzystuje moment js i będę musiał załadować wszystkie lokalizacje tylko dla dat, których używam, co nie jest korzystne dla użycia – Rishabh

Oto podobna implementacja w dyrektywie http: // jsfiddle.net/7y3y9nq7/ Angular translate mają pewne wydarzenia; Możesz go użyć, aby zmienić wartość modelu https://angular-translate.github.io/docs/#/guide/18_events –

Dodaj włoski locale, skopiowałem go od 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" 
};

Dodaj convert mapę dla kodów językowych z formatu en_EN do en:

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

W swojej przełącznika języka funkcja, usuń bieżący datepicker i zainicjuj nowy z nowym językiem, upewnij się, że zaktualizowałeś dat e w nowym formacie, a także:

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

Aby pokazać widok tylko kiedy tłumaczenie jest gotowy zmienić elementu otoki (użyłem <body>) wyglądać:

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

w kontrolerze:

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

ng model dyrektywa o jQuery datepicker nic nie robi, więc usunąłem go i Adde d ng-Model Kod aktualizacja początkowym Datepicker funkcji:

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

jeśli widzisz w wiadomości konsoli podobnego.

pascalprecht.translate $ translateSanitization: Brak strategii dezynfekcja odwiedził skonfigurowany. Może to mieć poważne konsekwencje dla bezpieczeństwa.

to mówi się, że ustalona w kolejnych wydaniach: https://github.com/taigaio/taiga-front/issues/778

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

Źródło

2016-10-15 23:03:25 Andriy

Dzięki za piękne i szczegółowe rozwiązanie Dla każdego, kto korzysta z translatePartialLoader musi odwołać się do http://stackoverflow.com/questions/32123924/angular-translate-fouc-problemy rozwiązywać problemy związane z migotaniem nieprzetłumaczonego tekstu – Rishabh

Zobacz także http://stackoverflow.com/questions/37247083/how-to-load-angular-translate-before- any-ui-is-display-with-ui-router-resolve do rozwiązywania problemów związanych z FOUC. – Rishabh

Jak dynamicznie przetłumaczyć wartość tekstu wejściowego (datepicker) za pomocą translacji kątowej?

Odpowiedz

Powiązane problemy