Home > Developer > Web Develop
Modelvalue and Viewvalue:
$viewValue: Actual string value in the view.
$modelValue: The value in the model, the control is bound to.
In Anuglar, it watchs the $modelValue for you and update $viewValue.
As you need to the Angular when you set $viewValue and apply render () function to update.
before the $render () function is called, the value would be passed into the $formatters.
$formatters: Array of functions to execute, as a pipeline, whenever the model value changes. The functions is called in reverse array order and each passing the value through to the next.
function Formatter (value) { if (value) { return value.touppercase ();} } Ngmodel. $formatters. push (formatter);Example:
/** * Created by Answer1215 on 12/18/2014.*/Angular.module (' App ', []). Directive (' Bank ',function($filter) {return{restrict:E, Template:' <div>click me to add $ your to account</div> ', require:' Ngmodel ', //The ^ prefix means that this directive searches for the controller in its parents (without the ^ prefix, the directive Would look for the controller on just its own element)Linkfunction(scope, element, Attrs, Ngmodelctrl) {/*Ngmodelctrl. $formatters. Push (function (modelvalue) {return "$" + modelvalue; });*/ //formatter is called before the renderNgmodelctrl. $formatters. Push ($filter ' currency ')); //$render function require user to implement itNgmodelctrl. $render =function() {Element.text (' Now we have: ' +Ngmodelctrl. $viewValue); } } } })
<!DOCTYPE HTML><HTMLNg-app= "App"><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title></Head><Body><DivNg-init= "money=10"></Div><BankNg-model= "Money"></Bank><BR/><inputtype= "text"Ng-model= "Money" /><Buttontype= "Reset"Ng-click= "Money=0">Reset</Button><Scriptsrc= "Bower_components/angular/angular.min.js"></Script><Scriptsrc= "App.js"></Script></Body></HTML>
$rollbackViewValue (): Cancel an update and reset the INPUT element's value $modelValue to prevent a update to the, which may Caus Ed by a pending debounced event or because the input was waiting for a some future event.
If you had an input, uses to ng-model-options set up debounced events or events such as Blur can has a situation where ther E is a period when the was out of synch with the $viewValue Ngmodel ' s $modelValue .
In this case, you can run into difficulties if you try to update the Ngmodel ' s $modelValue programmatically before these Debounc Ed/future events have resolved/occurred, because Angular ' s dirty checking mechanism are not able to tell whether the model Have actually changed or not.
The $rollbackViewValue() method should is called before programmatically changing the model of an input which could have such events Pendin G. This is important on order to make sure that the input field would be updated with the new model value and any pending O Perations is cancelled.
See:https://docs.angularjs.org/api/ng/type/ngmodel.ngmodelcontroller
$sec Service: We are using the $SCE service here and include the $sanitize module to automatically remove ' bad ' C Ontent like inline event listener (e.g. <span onclick="..."> ). However, as we are using the $sce model can still decide to provide unsafe content if it marks that content using the service.
Angular.module (' CustomControl ', [' ngsanitize ']). Directive (' Contenteditable ', [' $sce ',function($SCE) {return{restrict:' A ',//Only activate on element attributeRequire: '? Ngmodel ',//get a hold of NgmodelcontrollerLinkfunction(scope, element, Attrs, Ngmodel) {if(!ngmodel)return;//Do nothing if no Ng-model //Specify how UI should is updatedNgmodel. $render =function() {element.html ($sce. gettrustedhtml (Ngmodel. $viewValue|| ‘‘)); }; //Listen for change events to enable bindingElement.on (' Blur keyup change ',function() {scope. $evalAsync (read); }); Read (); //Initialize //Write Data to the model functionRead () {varHTML =element.html (); //When we clear the content editable the browser leaves a <br> behind //If STRIP-BR attribute is provided and we strip this out if(attrs.stripbr && html = = ' <br> ')) {HTML= ' '; } ngmodel. $setViewValue (HTML); } } };}]);
[AngularJS] Ngmodelcontroller render function
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
