Улучшить эту документацию Просмотреть исходный код ngModelOptions

Обзор

Эта директива позволяет изменять поведение директив ngModel в вашем приложении. Вы можете указать директиву ngModelOptions на любом элементе. Все директивы ngModel будут использовать опции ближайшего ngModelOptions предка.

Настройки ngModelOptions находятся путём оценки значения атрибута директивы как выражения AngularJS. Это выражение должно оцениваться в объект, чьи свойства содержат настройки. Например: <div ng-model-options="{ debounce: 100 }".

Наследование опций

Вы можете указать, что настройка ngModelOptions должна наследоваться от родительской директивы ngModelOptions, задав ей значение "$inherit". Тогда она будет унаследована от первой директивы ngModelOptions , найденной при обходе дерева DOM. Если нет предка содержащего директиву ngModelOptions, будут использоваться настройки по умолчанию.

Например, для следующего фрагмента HTML

<div ng-model-options="{ allowInvalid: true, debounce: 200 }">
  <form ng-model-options="{ updateOn: 'blur', allowInvalid: '$inherit' }">
    <input ng-model-options="{ updateOn: 'default', allowInvalid: '$inherit' }" />
  </form>
</div>

элемент input будет иметь следующие настройки

{ allowInvalid: true, updateOn: 'default', debounce: 0 }

Обратите внимание, что настройка debounce не была унаследована и использовала значение по умолчанию.

Вы можете указать, что все неопределённые настройки автоматически наследуются от предка, включив свойство с ключом "*" и значением "$inherit".

Например, для следующего фрагмента HTML

<div ng-model-options="{ allowInvalid: true, debounce: 200 }">
  <form ng-model-options="{ updateOn: 'blur', "*": '$inherit' }">
    <input ng-model-options="{ updateOn: 'default', "*": '$inherit' }" />
  </form>
</div>

элемент input будет иметь следующие настройки

{ allowInvalid: true, updateOn: 'default', debounce: 200 }

Обратите внимание, что настройка debounce теперь наследует значение от внешнего элемента <div>.

Если вы создаёте повторно используемый компонент, будьте осторожны при использовании "*": "$inherit", так как вы можете непреднамеренно унаследовать в будущем настройку, которая изменяет поведение вашего компонента.

Триггер и отложенное обновление модели

Свойства updateOn и debounce позволяют указать пользовательский список событий, которые будут вызывать обновление модели и/или отложенное действие, так что фактическое обновление произойдёт только после истечения таймера; этот таймер будет сброшен после следующего изменения.

Учитывая природу ngModelOptions, значение, отображаемое внутри полей ввода в представлении, может отличаться от значения в фактической модели. Это означает, что если вы обновите модель, вы также должны вызвать ngModel.NgModelController в соответствующем поле ввода, чтобы убедиться, что оно синхронизировано с моделью, и что любые отложенные действия отменены.

Самый простой способ обратиться к методу ngModel.NgModelController элемента управления - убедиться, что поле ввода находится внутри формы, которая имеет атрибут name. Это важно, потому что контроллеры form публикуются в связанном контексте под именем в атрибуте name.

Любые ожидающие изменения будут происходить немедленно при отправке содержащей формы посредством события submit. Обратите внимание, что события ngClick произойдут до обновления модели. Используйте ngSubmit для доступа к обновлённой модели.

Переопределение немедленных обновлений

Следующий пример демонстрирует, как переопределить немедленные обновления. Изменения в полях ввода внутри формы будут обновлять модель только тогда, когда элемент управления потеряет фокус (событие blur). Если нажата клавиша escape , пока поле ввода имеет фокус, значение сбрасывается до значения текущей модели.

Отложенное обновление

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

События по умолчанию, дополнительные триггеры и отложенные значения по умолчанию

Этот пример демонстрирует взаимосвязь между событиями обновления "по умолчанию" и дополнительными триггерами updateOn.

События default — это события, привязанные к элементу управления, и при срабатывании они обновляют $viewValue через $setViewValue. Любое событие, не указанное в updateOn , считается событием "по умолчанию", так как у различных типов элементов управления разные события по умолчанию.

Элемент управления в этом примере обновляется по умолчанию, при нажатии и потери фокуса, с разными значениями debounce. Вы можете заметить, что для "нажатия" нет индивидуального значения debounce — поэтому оно использует значение отложенного обновления "по умолчанию" *.

Также есть кнопка, которая непосредственно вызывает $setViewValue с событием "custom". Поскольку "custom" не определён в списке updateOn , оно считается событием "по умолчанию" и обновит элемент управления, если "по умолчанию" определено в updateOn, и получит значение отложенного обновления "по умолчанию". Обратите внимание, что это просто иллюстрация того, как пользовательские элементы управления могут потенциально вызывать $setViewValue.

Вы можете изменить конфигурации updateOn и debounce для тестирования различных сценариев. Это делается с помощью $overrideModelOptions.

Обновления модели и валидация

По умолчанию в ngModel значение модели устанавливается в undefined , когда валидация определяет, что значение некорректно. Установив свойство allowInvalid в true, модель всё равно будет обновлена, даже если значение некорректно.

Подключение к области

Установив свойство getterSetter в true, вы говорите ngModel, что выражение ngModel в области относится к функции "getter/setter", а не к самому значению.

Следующий пример демонстрирует привязку к getter/setter:

Программное изменение опций

Выражение ngModelOptions оценивается только один раз при подключении директивы; оно не отслеживается на изменения. Тем не менее, возможно переопределить опции для отдельного экземпляра ngModel.NgModelController с помощью NgModelController#$overrideModelOptions(). Также обратите внимание на пример для Событий по умолчанию, дополнительных триггеров и отложенных значений по умолчанию.

Указание часовых поясов

Вы можете указать часовой пояс, который ожидают директивы даты/времени, указав его имя в свойстве timezone.

Форматирование значения time и datetime-local

С помощью опций timeSecondsFormat и timeStripZeroSeconds можно настроить отображаемое в элементе управления значение. Обратите внимание, что браузеры могут применять собственное форматирование в пользовательском интерфейсе.