Làm thế nào để dịch các văn bản đầu vào (datepicker) giá trị động bằng cách sử dụng dịch góc?

Tôi đang sử dụng dịch góc để cung cấp i18n cho ứng dụng của mình, tôi có thể dịch nhãn, nút văn bản, v.v. Vấn đề tôi đang gặp phải là khi tôi đang cố thay đổi ngày theo ngôn ngữ đã chọn. Ngày được chọn từ bộ chọn ngày.Làm thế nào để dịch các văn bản đầu vào (datepicker) giá trị động bằng cách sử dụng dịch góc?

ngày được chọn vào một yếu tố đầu vào:

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

bản dịch placeholder hoạt động hoàn hảo, nhưng không có sự thay đổi xảy ra với định dạng ngày khi tôi thay đổi ngôn ngữ. Tôi đã tạo ra một plunkr mô tả kịch bản hiện tại.

Plunker Link

Xin gợi ý một cách thức mà tôi có thể dịch các giá trị chèn, hoặc văn bản trong hình thức. Ngoài ra, tôi muốn biết cách vượt qua các nhấp nháy của các giá trị quan trọng ngay trước khi trang được tải.

Nguồn

2016-10-11 Rishabh

Bạn đã thấy [này] (http://stackoverflow.com/questions/29742365/how-to- dịch-a-ngày-đối tượng-sử dụng-góc-dịch)? – Corporalis

vâng tôi đã thấy điều này, nhưng điều này sử dụng thời điểm js và tôi sẽ phải tải tất cả các ngôn ngữ chỉ cho những ngày tôi đang sử dụng, mà tôi không ủng hộ việc sử dụng – Rishabh

Đây là một triển khai tương tự trong một chỉ thị http: // jsfiddle.net/7y3y9nq7/ Dịch góc có một số sự kiện; Bạn có thể sử dụng nó, để thay đổi giá trị mô hình https://angular-translate.github.io/docs/#/guide/18_events –

Thêm locale Ý, tôi sao chép nó từ 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" 
};

Thêm bản đồ chuyển đổi cho mã ngôn ngữ từ định dạng en_EN-en:

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

Trong switcher ngôn ngữ của bạn chức năng, loại bỏ datepicker hiện tại và khởi tạo một cái mới với ngôn ngữ mới, hãy chắc chắn để cập nhật dat e ở định dạng mới cũng như:

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

Để hiển thị chỉ xem khi dịch đã sẵn sàng, thay đổi yếu tố wrapper của bạn (tôi đã sử dụng <body>) để trông giống như:

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

và trong điều khiển của bạn:

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

ng mô hình chỉ thị về jQuery datepicker không có gì, vì vậy tôi loại bỏ nó, và adde d ng-mã mô hình cập nhật ban đầu datepicker chức năng:

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

nếu bạn nhìn thấy trong tin nhắn giao diện điều khiển như:.

pascalprecht.translate $ translateSanitization: Chưa có chiến lược đã được thanh trùng đã được định cấu hình. Điều này có thể có những tác động bảo mật nghiêm trọng.

người ta nói được cố định trong phiên bản tiếp theo: https://github.com/taigaio/taiga-front/issues/778

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

Nguồn

2016-10-15 23:03:25 Andriy

Cảm ơn một giải pháp đẹp và chi tiết Đối với bất kỳ ai đang sử dụng translatePartialLoader phải tham khảo http://stackoverflow.com/câu hỏi/32123924/góc-dịch-fouc-vấn đề để giải quyết các vấn đề liên quan đến nhấp nháy của văn bản chưa được dịch – Rishabh

Ngoài ra, vui lòng tham khảo http://stackoverflow.com/questions/37247083/how-to-load-angular-translate-before- any-ui-được-hiển thị-với-ui-router-resolve để giải quyết vấn đề FOUC. – Rishabh

Làm thế nào để dịch các văn bản đầu vào (datepicker) giá trị động bằng cách sử dụng dịch góc?

Trả lời

Các vấn đề liên quan