2016-03-03 2 views
1

Угловой UT Bootstrap изменил способ того, что ожидает datepicker как ng-model в некоторой версии после 1.13.0. Прежде, чем было бы хорошо дать ему строку даты ISO, теперь она хочет объект Date.AngularJS: Создание директивы для преобразования строки в дату на лету

потребляет даты строки ISO от моего API, хотя, так что я должен

  • превратить их в Date объектов перед тем, как давать его DatePicker и
  • конвертировать их обратно в дате ISO строку при сохранении его ,

В прошлом я использовал директиву, как это:

function DateObjectDirective() { 
    const directive = { 
    restrict: "A", 
    require: ["ngModel"], 
    link(scope, element, attributes, controllers) { 
     const ngModel = controllers[0]; 

     ngModel.$formatters.unshift(value => { 
      let output = null; 

      if(value) { 
      output = moment(value).toDate(); 
      } 

      return output; 
     }); 

     ngModel.$parsers.unshift(value => { 
      let output = null; 

      if(value) { 
      output = moment(value).format(); 
      } 

      return output; 
     }); 
    }, 
    }; 

    return directive; 
} 

Это больше не работает, хотя, как сообщается следующее сообщение об ошибке:

this.activeDate.getFullYear не функция

Я полагаю, что datepicker все еще использует строку в качестве ссылки. Есть ли другой способ, которым я могу конвертировать, прежде чем передавать свои данные на datepicker?

ответ

1

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

Например:

<input ng-model="someDateString" uib-datepicker-popup="yyyy-MM-dd" woo-date-object> 

В моем случае, woo-date-object всегда оценивали до тогоuib-datepicker-popup. Результатом было то, что датапикер всегда подталкивал свой собственный форматировщик поверх ngModel.$formatters, тем самым устраняя возможность вмешательства.

Решение состоит в том, чтобы дать собственной директиве более высокий приоритет. DatePicker UI в не один набор, так что выше 0 (значение по умолчанию) работает:

{ 
    restrict: "A", 
    require: "ngModel", 
    priority: 9999, 
    link(scope, element, attributes, ngModel) { 
    ngModel.$formatters.push(value => { 
     let output = new Date(); 
     if(value) { output = moment(value).toDate(); } 
     return output; 
    }); 

    ngModel.$parsers.push(value => { 
     let output = null; 
     if(value) { output = moment(value).format(); } 
     return output; 
    }); 
    }, 
} 
+1

Я думаю, если вы назвали вашу директиву uibDatepickerPopup вы бы даже не нужно определить свою директиву (Woo-дата- объект) на элементе. –

+1

@RobJ 'uibDatepickerPopup' уже определен AngularUI Bootstrap. Также мне больше нравится использовать его, когда мне это нужно, не все время. – stschindler

+3

Угловой позволяет расширять директивы, используя одно и то же имя и устанавливая приоритет для порядка выполнения. –

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