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

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

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

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

Установив свойство getterSetter в true, вы сообщаете ngModel, что выражение ngModel в контексте относится к функции «получить/установить», а не к самому значению.

Следующий пример демонстрирует привязку к функциям получения/установки:

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

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

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

Выражение ngModelOptions вычисляется только один раз при привязке директивы; оно не отслеживается на изменения. Однако можно переопределить опции на единственном экземпляре ngModel.NgModelController с помощью NgModelController#$overrideModelOptions().