Улучшить эту документацию Посмотреть исходный код ngModel.NgModelController
- тип в модуле ng
NgModelController предоставляет API для директивы ngModel. Контроллер содержит сервисы для привязки данных, валидации, обновлений CSS, а также форматирования и разбора значений. Он намеренно не содержит никакой логики, связанной с рендерингом DOM или прослушиванием событий DOM. Такая логика, связанная с DOM, должна предоставляться другими директивами, которые используют NgModelController для привязки данных к управляющим элементам. Angular предоставляет эту логику DOM для большинства элементов input. В конце этой страницы вы можете найти пример пользовательского элемента управления, который использует ngModelController для привязки к элементам contenteditable.
Методы
-
$render();
Вызывается, когда необходимо обновить представление. Ожидается, что пользователь директивы ng-model реализует этот метод.
Метод
$render()вызывается в следующих ситуациях:-
Вызывается
$rollbackViewValue(). Если мы откатываем значение представления к последнему подтвержденному значению, то вызывается$render()для обновления элемента управления ввода. - Значение, на которое ссылается
ng-model, изменяется программно, и как$modelValue, так и$viewValueотличаются от предыдущего значения.
Так как
ng-modelне выполняет глубокое наблюдение,$render()вызывается только в том случае, если значения$modelValueи$viewValueфактически отличаются от их предыдущих значений. Если$modelValueили$viewValueявляются объектами (а не строкой или числом), то$render()не будет вызываться, если вы измените только свойство объектов. -
Вызывается
-
$isEmpty(value);
Вызывается, когда необходимо определить, пусто ли значение поля ввода.
Например, директива required использует это, чтобы выяснить, есть ли данные во входных данных или нет.
Функция
$isEmptyпо умолчанию проверяет, является ли значениеundefined,'',nullилиNaN.Вы можете переопределить это для директив ввода, понятие пустоты которых отличается от значения по умолчанию. Директива
checkboxInputTypeделает это, потому что в её случае значениеfalseозначает пустое значение.Параметры
Параметр Тип Описание value *Значение поля ввода для проверки на пустоту.
Возвращаемое значение
booleanTrue, если
valueявляется "пустым". -
$setValidity(validationErrorKey, isValid);
Изменение состояния допустимости и уведомление формы.
Этот метод может быть вызван в $parsers/$formatters или в реализации пользовательской проверки. Однако в большинстве случаев достаточно использовать коллекции
ngModel.$validatorsиngModel.$asyncValidators, которые автоматически вызовут$setValidity.Параметры
Параметр Тип Описание validationErrorKey stringИмя валидатора.
validationErrorKeyбудет присвоен либо$error[validationErrorKey], либо$pending[validationErrorKey](для невыполненных$asyncValidators), чтобы он был доступен для привязки данных.validationErrorKeyдолжен быть в camelCase и будет преобразован в dash-case для имени класса. Пример:myErrorприведет к классуng-valid-my-errorиng-invalid-my-errorи может быть привязан как{{someForm.someControl.$error.myError}}.isValid booleanЯвляется ли текущее состояние допустимым (true), недопустимым (false), ожидающим (undefined) или пропущенным (null). Ожидание используется для невыполненных
$asyncValidators. Пропущен используется Angular, когда валидаторы не запускаются из-за ошибок анализа и когда$asyncValidatorsне запускаются, потому что какой-либо из$validatorsне выполнен. -
$setPristine();
Устанавливает элемент управления в его первоначальное состояние.
Этот метод может быть вызван для удаления класса
ng-dirtyи установки элемента управления в его первоначальное состояние (классng-pristine). Модель считается первоначальной, когда элемент управления не был изменен с момента первой компиляции. -
$setDirty();
Устанавливает элемент управления в его измененное состояние.
Этот метод может быть вызван для удаления класса
ng-pristineи установки элемента управления в его измененное состояние (классng-dirty). Модель считается измененной, когда элемент управления был изменен с момента первой компиляции. -
$setUntouched();
Устанавливает элемент управления в его нетронутое состояние.
Этот метод может быть вызван для удаления класса
ng-touchedи установки элемента управления в его нетронутое состояние (классng-untouched). После компиляции модель по умолчанию устанавливается как нетронутая, однако эта функция может использоваться для восстановления этого состояния, если модель уже была затронута пользователем. -
$setTouched();
Устанавливает элемент управления в его затронутое состояние.
Этот метод может быть вызван для удаления класса
ng-untouchedи установки элемента управления в его затронутое состояние (классng-touched). Модель считается затронутой, когда пользователь впервые сфокусировался на элементе управления, а затем переместил фокус с элемента управления (событие blur). -
$rollbackViewValue();
Отменить обновление и сбросить значение элемента ввода, чтобы предотвратить обновление
$modelValue, которое может быть вызвано ожидающим событием с задержкой или потому что ввод ожидает некоторого будущего события.Если у вас есть поле ввода, которое использует
ng-model-optionsдля настройки событий с задержкой или событий, таких как blur, может возникнуть ситуация, когда$viewValueне синхронизируется с$modelValuengModel.В этом случае вы можете столкнуться с трудностями, если попытаетесь программно обновить
$modelValuengModel до того, как эти отложенные/будущие события разрешились/произошли, потому что механизм проверки изменений Angular не может определить, изменилась ли модель на самом деле или нет.Метод
$rollbackViewValue()должен вызываться перед программным изменением модели поля ввода, у которого могут быть такие ожидающие события. Это важно для того, чтобы убедиться, что поле ввода будет обновлено с новым значением модели, и любые ожидающие операции будут отменены. -
$validate();
Запускает каждый из зарегистрированных валидаторов (сначала синхронные валидаторы, а затем асинхронные). Если допустимость изменится на недопустимую, модель будет установлена в
undefined, если толькоngModelOptions.allowInvalidнеtrue. Если допустимость изменится на допустимую, она установит модель в последнее доступное допустимое$modelValue, то есть либо последнее разобранное значение, либо последнее значение, установленное из области видимости. -
$commitViewValue();
Подтвердить ожидающее обновление
$modelValue.Обновления могут ожидать события с задержкой или потому что ввод ожидает некоторого будущего события, определенного в
ng-model-options. Этот метод редко требуется, так какNgModelControllerобычно обрабатывает вызов этого метода в ответ на события ввода. -
$setViewValue(value, trigger);
Обновление значения представления.
Этот метод должен вызываться, когда директива ввода хочет изменить значение представления; как правило, это делается из обработчика события DOM.
Например, input вызывает его, когда изменяется значение ввода, и select вызывает его, когда выбран параметр.
Если новое
valueявляется объектом (а не строкой или числом), мы должны создать копию объекта перед передачей его в$setViewValue. Это связано с тем, чтоngModelне выполняет глубокое наблюдение за объектами, он только ищет изменение идентичности. Если вы измените только свойство объекта, то ngModel не поймет, что объект изменился, и не вызовет конвейеры$parsersи$validators.По этой причине вы не должны изменять свойства копии после того, как она была передана в
$setViewValue. В противном случае вы можете привести к неправильному изменению значения модели в области видимости.Когда вызывается этот метод, новое
valueбудет подготовлено для фиксации через конвейеры$parsersи$validators. Если не указаны специальные параметрыngModelOptions, то подготовленное значение отправляется непосредственно для обработки, в конечном итоге для применения к$modelValue, а затем к выражению, указанному в атрибутеng-model.Наконец, вызываются все зарегистрированные обработчики изменений в списке
$viewChangeListeners.В случае использования директивы ngModelOptions с
updateOnи отсутствия триггераdefaultв списке, все эти действия останутся в ожидании, пока одно из событийupdateOnне будет вызвано на элементе DOM. Все эти действия будут выполнены с задержкой, если директива ngModelOptions используется с пользовательской задержкой для этого конкретного события.Обратите внимание, что вызов этой функции не вызывает
$digest.Параметры
Параметр Тип Описание value stringЗначение из представления.
trigger stringСобытие, вызвавшее обновление.
Свойства
-
Значение в представлении
stringФактическое строковое значение в представлении.
-
Значение в модели
*Значение в модели, к которой привязано управление.
-
$parsers
Array.<Function>Массив функций, выполняемых как цепочка, всякий раз, когда управление считывает значение из DOM. Функции вызываются в порядке массива, при этом каждое возвращаемое значение передаётся следующей функции. Последнее возвращённое значение передаётся в коллекцию
$validators.Парсеры используются для очистки/преобразования
$viewValue.Возврат
undefinedиз парсера означает ошибку разбора. В этом случае ни одна проверка$validatorsне выполняется, иngModelустанавливается вundefined, если не установленоngModelOptions.allowInvalidвtrue. Ошибка разбора сохраняется вngModel.$error.parse. -
$formatters
Array.<Function>Массив функций, выполняемых как цепочка, всякий раз, когда меняется значение модели. Функции вызываются в обратном порядке массива, при этом каждое значение передаётся следующей функции. Последнее возвращаемое значение используется как фактическое значение DOM. Используется для форматирования/преобразования значений для отображения в управлении.
function formatter(value) { if (value) { return value.toUpperCase(); } } ngModel.$formatters.push(formatter); -
$validators
Object.<string, function>Коллекция проверок, применяемых всякий раз, когда меняется значение модели. Значение ключа в объекте относится к имени проверки, а функция — к операции проверки. Операция проверки получает значение модели в качестве аргумента и должна возвращать true или false в зависимости от результата проверки.
ngModel.$validators.validCharacters = function(modelValue, viewValue) { var value = modelValue || viewValue; return /[0-9]+/.test(value) && /[a-z]+/.test(value) && /[A-Z]+/.test(value) && /\W+/.test(value); }; -
$asyncValidators
Object.<string, function>Коллекция проверок, ожидающих асинхронную проверку (например, HTTP-запрос). Функция проверки, которая предоставляется, должна возвращать промис при выполнении в процессе проверки модели. После того, как промис будет доставлен, статус проверки будет установлен в true при успехе и в false при отклонении. При запуске асинхронных проверок каждая из проверок выполняется параллельно, а значение модели обновляется только после того, как все проверки будут выполнены. Пока асинхронная проверка не выполнена, её ключ добавляется в свойство контроллера
$pending. Кроме того, все асинхронные проверки выполняются только после успешного прохождения всех синхронных проверок.Обратите внимание, что если используется $http, то для выполнения проверки важно, чтобы сервер возвращал успешный HTTP-код ответа, а для отклонения проверки — статус
4xx.ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) { var value = modelValue || viewValue; // Lookup user by username return $http.get('/api/users/' + value). then(function resolved() { //username exists, this means validation fails return $q.reject('exists'); }, function rejected() { //username does not exist, therefore this validation passes return true; }); }; -
$viewChangeListeners
Array.<Function>Массив функций, которые выполняются всякий раз, когда изменилось значение представления. Вызывается без аргументов, а возвращаемое значение игнорируется. Это может быть использовано вместо дополнительных $watches относительно значения модели.
-
$error
ObjectОбъект-хеш с идентификаторами всех не пройденных проверок в качестве ключей.
-
$pending
ObjectОбъект-хеш с идентификаторами всех ожидающих проверок в качестве ключей.
-
$untouched
booleanTrue, если управление ещё не потеряло фокус.
-
$touched
booleanTrue, если управление потеряло фокус.
-
$pristine
booleanTrue, если пользователь ещё не взаимодействовал с управлением.
-
$dirty
booleanTrue, если пользователь уже взаимодействовал с управлением.
-
$valid
booleanTrue, если ошибок нет.
-
$invalid
booleanTrue, если в управлении есть хотя бы одна ошибка.
-
$name
stringАтрибут name управления.
Этот пример демонстрирует, как использовать NgModelController с настраиваемым управлением для достижения привязки данных. Обратите внимание, как разные директивы (contenteditable, ng-model, и required) взаимодействуют для достижения желаемого результата.
contenteditable — атрибут HTML5, который сообщает браузеру, что содержимое элемента может быть отредактировано пользователем.
Здесь используется служба $sce, и включён модуль $sanitize, чтобы автоматически удалять «плохое» содержимое, такое как встроенные обработчики событий (например, <span onclick="...">). Однако, поскольку используется $sce, модель всё ещё может предоставить небезопасное содержимое, если пометит его с помощью сервиса $sce.
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.3.20/docs/api/ng/type/ngModel.NgModelController