如何翻譯Angular-UI-Bootstrap datepicker？

Question

的日期選擇（Angle-UI-BootStrap）文檔報告：

一切都使用date filter格式化，因此也 本地化。

檢查爲date filter的文檔都可以訪問的i18n and i10n爲AngularJs的概念。但是，提供的兩種方法不能用於我的應用程序。這兩種方法：

1. 預先綁定規則集
2. 包括index.html頁面

區域JS腳本在我的申請，我檢查語言客戶進行登錄後的客戶端。所以我的index.html頁面已經被創建和配置了。

有沒有其他方法來翻譯日期選擇器？一種動態的方式...就像改變$ scope的值，改變執行組件翻譯的接口一樣？

這是一個plunker演示了在index.html中引入pt-BR翻譯的方法。

更新： 我問這個問題在issue of the Angle-UI-Bootstrap，這裏是我從@bekos收到的響應：

@ThCC真正的問題是，你不能在 運行時更改您的$語言環境，或者至少我不知道有辦法做到這一點。即使你用日期選擇器解決了問題，你仍然會遇到 每個其他與語言環境相關的過濾器（如貨幣）的問題。我認爲 更適合在AngularJS問題中提出更一般的問題。

如果有人有另一種解決方案總是歡迎。如果我得到解決方案，我會回到這裏。

Answer 1

有人說[真正的問題是，您不能在運行時更改$ locale]。其實你可以。你可以看到一個工作的重擊者here。

Answer 2

你可以這樣創建自己的指令：

angular 
    .module('myApp.common') 
    .directive('datepickerPopupWrap', datepickerPopupWrap); 

datepickerPopupWrap.$inject = ['$rootScope']; 

function datepickerPopupWrap($rootScope, $compile) { 

    return { 

     restrict: 'A', 
     require: 'ngModel', 

     link: function($scope, $element, attrs, ngModel) { 
      // Force popup rerender whenever locale changes 
      $rootScope.$on('localeChanged', ngModel.$render); 
     } 
    }; 

} 

指令名必須datepickerPopupWrap，所以它與呈現彈出默認UI的引導指令一起執行。

之後，當更改地區與angular-dynamic-locale，這樣做：

tmhDynamicLocale.set(languageKey).then(function() { 

    // Set the language in angular-translate 
    $translate.use(languageKey); 

    // Broadcast the event so datepickers would rerender 
    $rootScope.$broadcast('localeChanged'); 
}); 

Answer 3

我卻高興不起來使用給定的辦法，所以我想通了這一個使用angular-translate和可能性，覆蓋角-ui-自舉的模板這樣的（來源自ui-bootstrap-tpls.js）：

對於uib/template/datepicker/day.html：

angular.module("uib/template/datepicker/day.html", []).run(["$templateCache", function($templateCache) { 
    $templateCache.put("uib/template/datepicker/day.html", 
     "<table class=\"uib-daypicker\" role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" + 
     " <thead>\n" + 
     " <tr>\n" + 
     "  <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left uib-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" + 
     "  <th colspan=\"{{::5 + showWeeks}}\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm uib-title\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\"><strong>{{ title | uppercase | localizeMonth }}</strong></button></th>\n" + 
     "  <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right uib-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" + 
     " </tr>\n" + 
     " <tr>\n" + 
     "  <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n" + 
     "  <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{ ('DAY_' + label.abbr | uppercase) | translate}}</small></th>\n" + 
     " </tr>\n" + 
     " </thead>\n" + 
     " <tbody>\n" + 
     " <tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\">\n" + 
     "  <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" + 
     "  <td ng-repeat=\"dt in row\" class=\"uib-day text-center\" role=\"gridcell\"\n" + 
     "  id=\"{{::dt.uid}}\"\n" + 
     "  ng-class=\"::dt.customClass\">\n" + 
     "  <button type=\"button\" class=\"btn btn-default btn-sm\"\n" + 
     "   uib-is-class=\"\n" + 
     "   'btn-info' for selectedDt,\n" + 
     "   'active' for activeDt\n" + 
     "   on dt\"\n" + 
     "   ng-click=\"select(dt.date)\"\n" + 
     "   ng-disabled=\"::dt.disabled\"\n" + 
     "   tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n" + 
     "  </td>\n" + 
     " </tr>\n" + 
     " </tbody>\n" + 
     "</table>\n" + 
     ""); 
}]); 

對於uib/template/datepicker/month.html：

angular.module("uib/template/datepicker/month.html", []).run(["$templateCache", function($templateCache) { 
    $templateCache.put("uib/template/datepicker/month.html", 
     "<table class=\"uib-monthpicker\" role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" + 
     " <thead>\n" + 
     " <tr>\n" + 
     "  <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left uib-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" + 
     "  <th><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm uib-title\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\"><strong>{{title}}</strong></button></th>\n" + 
     "  <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right uib-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" + 
     " </tr>\n" + 
     " </thead>\n" + 
     " <tbody>\n" + 
     " <tr class=\"uib-months\" ng-repeat=\"row in rows track by $index\">\n" + 
     "  <td ng-repeat=\"dt in row\" class=\"uib-month text-center\" role=\"gridcell\"\n" + 
     "  id=\"{{::dt.uid}}\"\n" + 
     "  ng-class=\"::dt.customClass\">\n" + 
     "  <button type=\"button\" class=\"btn btn-default\"\n" + 
     "   uib-is-class=\"\n" + 
     "   'btn-info' for selectedDt,\n" + 
     "   'active' for activeDt\n" + 
     "   on dt\"\n" + 
     "   ng-click=\"select(dt.date)\"\n" + 
     "   ng-disabled=\"::dt.disabled\"\n" + 
     "   tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{ ('MONTH_' + dt.label | uppercase) | translate }}</span></button>\n" + 
     "  </td>\n" + 
     " </tr>\n" + 
     " </tbody>\n" + 
     "</table>\n" + 
     ""); 
}]); 

您還需要通過延長您的語言文件（這是德語）：

, 'MONTH_JANUARY':     'Januar' 
, 'MONTH_FEBRUARY':     'Februar' 
, 'MONTH_MARCH':     'März' 
, 'MONTH_APRIL':     'April' 
, 'MONTH_MAY':      'May' 
, 'MONTH_JUNE':      'June' 
, 'MONTH_JULY':      'July' 
, 'MONTH_AUGUST':     'August' 
, 'MONTH_SEPTEMBER':    'September' 
, 'MONTH_OCTOBER':     'October' 
, 'MONTH_NOVEMBER':     'November' 
, 'MONTH_DECEMBER':     'December' 

而且，由於日期選擇器的當前月份orignally呈現爲{{title}} provied通過scope.title = dateFilter(this.activeDate, this.formatDayTitle);（線2216 ui-bootstrap-tpls.js），你必須加載過濾當月本地化（感謝this post）：

/* global app */ 
app.filter('localizeMonth', function($interpolate) 
{ 
    return function (input) 
    { 
     return input 
      .replace(/JANUARY/g, $interpolate('{{ \'MONTH_JANUARY\' | translate}}')) 
      .replace(/FEBRUARY/g, $interpolate('{{ \'MONTH_FEBRUARY\' | translate}}')) 
      .replace(/MARCH/g,  $interpolate('{{ \'MONTH_MARCH\'  | translate}}')) 
      .replace(/APRIL/g,  $interpolate('{{ \'MONTH_APRIL\'  | translate}}')) 
      .replace(/MAY/g,  $interpolate('{{ \'MONTH_MAY\'  | translate}}')) 
      .replace(/JUNE/g,  $interpolate('{{ \'MONTH_JUNE\'  | translate}}')) 
      .replace(/JULY/g,  $interpolate('{{ \'MONTH_JULY\'  | translate}}')) 
      .replace(/AUGUST/g, $interpolate('{{ \'MONTH_AUGUST\' | translate}}')) 
      .replace(/SEPTEMBER/g, $interpolate('{{ \'MONTH_SEPTEMBER\' | translate}}')) 
      .replace(/OCTOBER/g, $interpolate('{{ \'MONTH_OCTOBER\' | translate}}')) 
      .replace(/NOVEMBER/g, $interpolate('{{ \'MONTH_NOVEMBER\' | translate}}')) 
      .replace(/DECEMBER/g, $interpolate('{{ \'MONTH_DECEMBER\' | translate}}')) 
     ; 
    }; 
}); 

我認爲這個解決方案至少與這裏發明的其他黑客一樣醜陋，但你不必自己觸發重繪或類似的事情。