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

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

Программное изменение параметров

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

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

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

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

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