Как создать угловую директиву datepicker, которая использует ng-model

Question

Я создал угловую директиву для моего jQuery UI datepicker. Проблема в том, что директива не обновляет ng-модель ввода при выборе даты. Любая идея почему?

http://jsbin.com/ufoqan/1/edit

Answer 1

Угловой JS фактически предоставляет специальный контроллер для взаимодействия с ngModel, который вы можете использовать внутри своих директив; просто добавьте require: 'ngModel' к определению вашей директивы.

Это дает вам четвертый параметр вашей функции link, который вы запросили у контроллера в require - в данном случае экземпляр of ngModelController. Он имеет метод $setViewValue вы можете использовать, чтобы установить значение модели:

app.directive('datepicker', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, el, attr, ngModel) { 
     $(el).datepicker({ 
     onSelect: function(dateText) { 
      scope.$apply(function() { 
      ngModel.$setViewValue(dateText); 
      }); 
     } 
     }); 
    } 
    }; 
}); 

Прелесть ngModelController он автоматически заботится о проверке и форматирование (в случае конкретного входа type) и интеграции с такими вещами, как ngChange callbacks; проверить this example: http://jsbin.com/ufoqan/6/edit

Answer 2

Там может быть лучше, но это будет работать:

http://jsbin.com/ufoqan/4/edit

app.directive('datepicker', function() { 
    return { 
    link: function(scope, el, attr) { 
     $(el).datepicker({ 
     onSelect: function(dateText) { 
      console.log(dateText); 
      var expression = attr.ngModel + " = " + "'" + dateText + "'"; 
      scope.$apply(expression); 
      console.log(scope.startDate); 
      // how do i set this elements model property ? 
     } 
     }); 
    } 
    }; 
}); 

Вы также спросили, почему. Причина в том, что jquery происходит за пределами угловой системы. Дополнительную информацию вы можете найти по методу $ apply: docs

Answer 3

@Michelle Тилля и @Jonah правы линкование директивы ngModel, но почему вы не использовали Datepicker, что чисто Угловой вместо JQuery?
Ну, я представляю ADMdtp модуль. Это чистый AngularJs DateTimePicker с большим количеством Greate опций:

• полностью синхронизирован с ngModel, поэтому нет необходимости, чтобы уничтожить или manulay обновить DateTimePicker.
• предварительный выбор дальности; сделать так много dateTimePicker, как вы хотите связать вместе, и снова не нужно уничтожать или вручную обновлять каждый dateTimePicker.
• disabing pattern; так легко вы можете отключить любой день (ы) в неделю или месяц, как и все выходные.
• переход на изменение дней. (из проклятия вы можете отключить его в опциях)
• получить полные данные даты, такие как дата в формате UNIX, формат даты и год, месяц, день, час и минута отдельно и ... по атрибуту full-data.
• ...

<adm-dtp ng-model="date" full-data="date_full"></adm-dtp>