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

Ответ 1

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

Это дает вам четвертый параметр вашей функции link, которую вы запросили в require - в этом случае экземпляр из 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 обратные вызовы; просмотрите этот пример: http://jsbin.com/ufoqan/6/edit

Ответ 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 происходит вне системы angular. Дополнительную информацию вы можете найти в разделе метода $apply: docs

Ответ 3

@Michelle Tilley и @Jonah прав насчет ссылки на вашу директиву на ngModel, но почему вы не использовали datePicker, который является чистым Angular вместо jQuery?
Ну, я представляю ADMdtp модуль. Это чистый AngularJs dateTimePicker с множеством вариантов greate:

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

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