Ngmodelcontroller: $setViewValue, $render, Formatter, Parser

Ngmodelcontroller provides an API for Ngmodel directive. This controller contains information about DATA-BINDING,VALIDATION,CSS update, value formatting and Parsing related service. The controller intended to be designed without any logic to handle DOM rendering or to listen for DOM events. These DOM-related logic should be done by other directive that use Ngmodelcontroller to do databinding. Angular provides this DOM logic for almost all input elements.

$render ()

This function is called when the view needs to be updated, and is generally expected to be implemented by Ng-modle users:

$setViewValue(value, trigger)

This function is used to update the value of view, which needs to be called when the view values need to be changed. Typically, this function is called by the DOM's event handler function. For example, an input directive invokes $setviewvalue when its input is changed, such as: The Select control also calls this function to update view value when an option is selected.

Note that when $setviewvalue is called, the new value will be staged through $parsers, $validators the pipeline is checked and then commits to the view.

$parsers

This is an array of function pointers provided by Ngmodelcontroller, which will act as a pipeline, and when the control reads value from the DOM (by $viewvlaue Cache), all functions in this $parsers array will be executed one at a time. The value returned when the order is executed is passed to the $validators function array to do the vaildation. If parse has an error, then undefined will be returned.

$formatters

$formatters will contain an array of functions as pipeline, which is called when model value changes. These functions are called in reverse order, and each function passes its return value to the next function. The output of the last function as the actual DOM value ($viewValue)

This function is used to format/convert the values for display in the control

function Formatter (value) {  if  (value) {    return  value.touppercase ();}  } Ngmodel. $formatters. push (formatter);

$validators

This is a collection of validator that will be called when the model value is changed.

function (Modelvalue, viewvalue) {  var value = Modelvalue | | Viewvalue;   return /[0-9]+/.test (value) &&         /[a-z]+/.test (value) &&         /[a-z]+/.test (value) & &         /\w+/. Test (value);};

Comprehensive Example:

App.directive (' ChangeCase ',function(){    return{restrict:A, Templateurl:' Scripts/directives/directive_templates/directive.html ', require:' Ngmodel ', Link:function(scope, element, attr, Ngmodel) {Ngmodel. $formatters. Push (function(value) {value.touppercase (); returnvalue;}); Ngmodel. $parsers. Push (function(value) {value.touppercase (); returnvalue;}); }    };});<form role= "form" name= "MyForm" > <div class= "Form-group" > <label>view value:</label> <input name= "Someinput" changecase= "" ng-model= "Some_letters.value" > </div></form><strong> Modelvalue:</strong> <br>

Ngmodelcontroller: $setViewValue, $render, Formatter, Parser