Динамическое изменение языка Angular Bootstrap Datepicker

Мне трудно создавать этот код. То, что я использовал, было

 $scope.convertToLanguage = function ($language) {
     var fileref = document.createElement("script");
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", "whatever the filename is");

        if (typeof fileref != "undefined") {
            document.getElementsByTagName("head")[0].appendChild(fileref)
        }
  }

Я попытался сделать источник динамическим, загрузив любую из этих локалей.

<script src = "angular-locale_de-de.js"> </script>
angular-locale_es-es.js
angular-locale_it-it.js
angular-locale_fr-fr.js

Скрипт загружается. Однако язык не меняется. Как я читал из предыдущих вопросов, мы используем локали для преобразования языка средства выбора.

Я хочу изменить язык в моем мероприятии "**ng-click**".

Пожалуйста помоги.


person PipeMan    schedule 11.12.2014    source источник


Ответы (2)


К сожалению, я не смог сделать это с i18n. Тем не менее, я понял это правильно, изменив сам угловой бутстрап (часть средства выбора даты), вы увидите его в контроллере. Я использовал массив javascript, затем выполнил условные выражения, используя регистр, а затем назвал соответствующие месяцы/дни на другом языке из моего массива. Проверь это.

this.modes = [
  {
      name: 'day',
      getVisibleDates: function (date, selected) {

          var year = date.getFullYear(), month = date.getMonth(), firstDayOfMonth = new Date(year, month, 1);
          var difference = startingDay - firstDayOfMonth.getDay(),
          numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,
          firstDate = new Date(firstDayOfMonth), numDates = 0;

          if (numDisplayedFromPreviousMonth > 0) {
              firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
              numDates += numDisplayedFromPreviousMonth; // Previous
          }
          numDates += getDaysInMonth(year, month + 1); // Current
          numDates += (7 - numDates % 7) % 7; // Next

          var days = getDates(firstDate, numDates), labels = new Array(7);
          for (var i = 0; i < numDates; i++) {
              var dt = new Date(days[i]);
              days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate()     && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month);
          }

          //I Edited this part
          for (var j = 0; j < 7; j++) {
              labels[j] = global.shortDays[j];
          }


          monthDisplay = dateFilter(date, format.dayTitle);

          var e, f, i, s;

          for (var i = 0; i < 12; i++) {
              if (global.languageValidator === "de") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.germanMonths[i]);
              }
              else if (global.languageValidator === "fr") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.frenchMonths[i]);

              }
              else if (global.languageValidator === "it") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.italianMonths[i]);

              }
              else if (global.languageValidator === "es") {
                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.spanishMonths[i]);
              }
          }



          //return { objects: days, title: dateFilter(date, format.dayTitle), labels: labels }; //orignal return
          return { objects: days, title: monthDisplay, labels: labels }; //modified return
       //until here

      },
      compare: function (date1, date2) {
          return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
      },
      split: 7,
      step: { months: 1 }
  },
  {
      name: 'month',
      getVisibleDates: function (date, selected) {
          var months = new Array(12), year = date.getFullYear();
          for (var i = 0; i < 12; i++) {
              var dt = new Date(year, i, 1);
              //months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));

              //Modified by AARON

              if (global.languageValidator === "de") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.germanMonths[i];
              }
              else if (global.languageValidator === "fr") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.frenchMonths[i];
              }
              else if (global.languageValidator === "it") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.italianMonths[i];
              }
              else if (global.languageValidator === "es") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.spanishMonths[i];
              }
              else
              {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
              }
              //console.log("Label = " + months[i].label);

          }
          //console.log({ objects: months, title: dateFilter(date, format.monthTitle) });
          return { objects: months, title: dateFilter(date, format.monthTitle) };

      },
      compare: function (date1, date2) {
          return new Date(date1.getFullYear(), date1.getMonth()) - new Date(date2.getFullYear(), date2.getMonth());
      },
      split: 3,
      step: { years: 1 }

  },
person PipeMan    schedule 19.12.2014
comment
ой, это довольно грязно нет? - person gerl; 28.08.2015

Я предлагаю вам использовать модуль angular-translate, который поможет вам легко переключаться между локалями.

Вы сможете ссылаться на любые файлы переводов, которые вам нужны, и загружать асинхронно тот, который вам нужен по желанию. Для этого вам также понадобится дополнительный плагин angular-translate-loader-static-files.

Пример :

$translateProvider.useStaticFilesLoader({ // reference any locale-xxxxx.json locale file
    prefix: 'locale-',
    suffix: '.json'
});
$translateProvider.preferredLanguage('en'); // use "en" by default
$translateProvider.determinePreferredLanguage(); // automatically determine best locale from browser config
$translate.use('de'); // force the use of "de" at runtime

Более того, этот плагин содержит множество полезных функций вокруг i18n. Я использую его во всех своих проектах, даже если у меня есть только одна локаль;)

См. демо на: http://angular-translate.github.io/docs/#/guide/07_multi-language (

надеюсь, это поможет

person Jscti    schedule 11.12.2014
comment
Привет Cetia, если у вас есть время, не могли бы вы привести рабочий пример вместе с файлом html? Если есть рабочий плунжер, буду очень признателен. В любом случае, спасибо! - person PipeMan; 11.12.2014
comment
Вы можете найти множество примеров в документе angular-translate: например, внизу страницы здесь: angular-translate.github.io/docs/#/guide/07_multi-language - person Jscti; 11.12.2014
comment
подождите, можно ли изменить язык средства выбора даты angular bootstrap с помощью angular-translate? - person Aniket Sinha; 11.12.2014
comment
Да, но вам придется перегрузить шаблон, чтобы вместо этого использовать директивы angular-translate. См. stackoverflow.com /questions/17660947/ (лично я использую второй шаблон ответа с html2js) - person Jscti; 11.12.2014
comment
Ааа, вот это идеальное решение. - person Aniket Sinha; 11.12.2014