View source Improve this doc

NgModelController
type in module ng

Description

NgModelController provides API for the ng-model directive. The controller contains services for data-binding, validation, CSS updates, and value formatting and parsing. It purposefully does not contain any logic which deals with DOM rendering or listening to DOM events. Such DOM related logic should be provided by other directives which make use of NgModelController for data-binding.

Custom Control Example

This example shows how to use NgModelController with a custom control to achieve data-binding. Notice how different directives (contenteditable, ng-model, and required) collaborate together to achieve the desired result.

Note that contenteditable is an HTML5 attribute, which tells the browser to let the element contents be edited in place by the user. This will not work on older browsers.

Source









Demo

Isolated Scope Pitfall

Note that if you have a directive with an isolated scope, you cannot require ngModel since the model value will be looked up on the isolated scope rather than the outer scope. When the directive updates the model value, calling ngModel.$setViewValue() the property on the outer scope will not be updated. However you can get around this by using $parent.

Here is an example of this situation. You'll notice that the first div is not updating the input. However the second div can update the input properly.

Source





Demo

Methods

Properties