2014-12-11 3 views
2

Мне сложно создать этот код. Что я былДинамическое изменение языка углового бутстрапа 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 

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

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

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

ответ

1

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

Вы можете обратиться к любым файлам перевода, которые вам нужны, и загрузить асинхронно то, что вам нужно по желанию. Для этого вам также понадобится плагин optionnal 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 

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

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

Надежда, что помогает

+0

Привет, Cetia, если у вас есть время, вы можете дать рабочий пример вместе с html-файлом? Если есть рабочий плункер, я бы очень его оценил. В любом случае, спасибо! – PipeMan

+0

Вы можете найти тонны примера на документе углового перевода: например, внизу страницы здесь: http://angular-translate.github.io/docs/#/guide/07_multi-language –

+1

alright спасибо! – PipeMan

2

К сожалению, я не был в состоянии сделать это с i18n. Тем не менее, я исправился, изменив сам угловой бутстрап (часть datepicker), вы увидите его в контроллере. Я использовал массив 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 } 

    }, 
+0

ouch thats довольно грязный нет? – gerl

Смежные вопросы