Angular-UI-Bootstrap datepickerの翻訳方法は？

Question

日付ピッカー（Angle-UI-BootStrap）のドキュメントレポート：

すべてがdate filterを使用してフォーマットされるため、ローカライズされた もあります。

date filterのドキュメントを確認すると、AngularJsのi18n and i10nという概念にアクセスできます。しかし、提供されている2つのアプローチは、私のアプリケーションでは使用できません。二つのアプローチがあります：

1. プリバンドルされたルールは、私のアプリケーションでのindex.htmlページ

でロケールJSのスクリプトを含む

設定し、私は言語をチェック彼がログインした後のクライアントのしたがって、私のindex.htmlページは既に作成され、設定されています。

datepickerを翻訳する他の方法はありませんか？動的な方法...コンポーネントの翻訳を実行するインタフェースを変更する$ scopeの値を変更するような何か？

ここには、index.htmlにpt-BRの翻訳を導入する方法を示すplunkerがあります。

更新： 私はissue of the Angle-UI-Bootstrapにこの質問をし、そしてここで私は@bekosから受信した応答である：本当の問題@ThCC

あなたは 実行時に、あなたの$のロケールを変更することはできませんということです、または少なくとも私はこれを行う方法を知らない。 がdatepickerの問題を解決しても、通貨のようにロケールに依存するその他すべてのフィルタにはまだ の問題があります。私はそれがAngularJSの問題のより一般的な質問にお答えする方が良いと思っています（ ）。

誰かが他の解決策を持っている場合は、いつでも歓迎します。私が解決策を得るなら、私はここに戻るでしょう。

Answer 1

[実際の問題は、実行時に$ロケールを変更できないということです]。事実、そうすることができます。あなたは働いているプラ​​ンカー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); 
     } 
    }; 

} 

それがポップアップをレンダリングするデフォルトのUI-ブートストラップディレクティブと一緒に実行されますので、ディレクティブ名は、datepickerPopupWrapでなければなりません。

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と可能性を、使用してこれを考え出した：あなたはangular-dynamic-localeでロケールを変更するたび

次に、これを行うには、このような-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);（ラインui-bootstrap-tpls.jsにおける2216）によって、あなたは現在の月をローカライズするためのフィルタをロードする必要が（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}}')) 
     ; 
    }; 
}); 

私は、このソリューションは、ここで発明された他のハックと少なくとも同じくらい醜いと思いますが、自分で再描画や類似のものをトリガーする必要はありません。