Talking about the $render_angularjs of Ngmodel in angular

When I started Ngmodel, there was one problem that was troubling me, and that was what $render was doing? Search a lot of information is just a simple description, which made me very tangled, and finally in a sunny night, I finally solved the big problem

So what exactly does this $render method do? His usefulness was to rebind the model data when $viewvalue changed, but we had to pay attention to the point ($viewValue and DOM node value is different), and I think their difference is somewhat similar to settimeout and $ Timeout the difference, but not quite the same. PS: In fact, modelvalue and binding data can also be different

Input Model value: {{vm.modeltest}}
<input type= "text" ng-model= "Vm.modeltest" model-render>

. directive (' Modelrender ', function () {return
    {
      require: ' Ngmodel ',
      link:function (scope, IELM, Iattrs, Ngmodelctrl) {
        ielm.on (' MouseEnter '), function () {
          //attempt to annotate
          ielm.val (1);
          Console.log (Ngmodelctrl);
          
          Attempt to annotate
          Ngmodelctrl. $setViewValue (one);
          Console.log (Ngmodelctrl);
          
          Attempt to annotate
          Ngmodelctrl. $render ();
          Console.log (Ngmodelctrl);
        }} 
      }
  )

We analyze several situations

This is when the mouse does not go through the instructions.

1. When we use the JS native method to set the Val value of input, and do not perform the $render function, we can see the model inside the input is unchanged, but the value of input is changed to 1, and we see not only the model value unchanged, Ngmodel's $viewvalue and $modelvalue also did not change. We can draw a conclusion (the value of input is not necessarily equal to $viewvalue)

The result is this.

--------------------------------------------------------------------------

Then, we try to perform the $render function after we execute the JS native change value.

After reading the above experiment, we found that the value of input has not changed, that is, the value of JS original change input is invalid, so here we can see the function of $render.

We can boldly anticipate $render function is consistent with $apply function, we said in the previous chapter, $apply is mainly viewvalue, let Modelvalue into Viewvalue, that is Modelvalue-> Viewvalue, then $render is not to modelvalue mainly, let Viewvalue->modelvalue?

-------------------------------------------------------------------------------------------------

2. Next we try to use NG native change that means $setviewvalue, how does it behave?

Now we annotate the method of JS native change value, and go to use $setviewvalue, and do not execute the $render function, directly on the result, we see, after executing $setviewvalue, Both Viewvalue and Modelvalue are synchronized, but the value in input is still test, where we validate that assertion again ($viewValue is different from the value of the DOM node )

Now we use it after $setviewvalue, $render () to see what the effect is,

We found it, $render function and $apply function is very similar, but is not a lot of people in the $render, will say model sync to view, I think this statement is not quite right, I tested in the click event Using unconventional means to change the value of the model in controller, found that even if the value of controller has changed, but Ngmodel value either Viewvalue or Modelvalue have not changed, and then try to use $ Modelvalue attributes forcibly change the $modelvalue, the result is still no effect.

Let's look at the source code for $render.

Ctrl. $render = function () {
  element.val (ctrl. $isEmpty (CTRL. $viewValue)? ': Ctrl. $viewValue);
 

This is one of them, $render the code under different instructions is not the same, but its role is basically the same, but from here we can see what $render is doing. So when does $render trigger? In fact, see yourself when you want to call it, you can override his method, rewrite, in $watch or $viewChange. Default trigger event Some special input value changes, such as radio, and Rollbackview ()

Another real embodiment of $render implementation of the source code here, inside I wrote a note, we should all understand

$scope. $watch (function Ngmodelwatch () {//parse Ngmodel expression, get content var modelvalue = Ngmodelget ($scope);
　　If scope model value and Ngmodel value are out of sync//TODO (PERF): Why don't move this to the action FN?  Determines whether the value of an expression is consistent with Modelvalue Modelvalue!== ctrl. $modelValue &&//checks for NaN is needed to allow setting
  The model to NaN when there ' s a asyncvalidator (ctrl. $modelValue = = = Ctrl. $modelValue | | modelvalue = = modelvalue)
   {//update the value of Modelvalue ctrl. $modelValue = ctrl.$ $rawModelValue = modelvalue;
　　　　Parservalid = undefined;
　　　　
   Get pipeline information var formatters = Ctrl. $formatters, IDX = formatters.length;
   var viewvalue = Modelvalue;
   while (idx--) {viewvalue = Formatters[idx] (viewvalue); //If Viewvalue and Modelvalue inconsistent if (ctrl. $viewValue!== Viewvalue) {ctrl. $viewValue = ctrl.$ $lastCommittedViewVa
    Lue = Viewvalue;

    Ctrl. $render ();
   ctrl.$ $runValidators (Modelvalue, Viewvalue, NoOp); }//Returns the parsed expression retUrn Modelvalue;
}); }];

The above is a small series for everyone to bring the angular of the ngmodel in the $render of all content, I hope that we support cloud-Habitat Community ~