perf(input): prevent multiple $digest when input is blurred #8450
Conversation
@kevinjamesus86 noticed that the input control would trigger a $digest cycle every time it was blurred, adcc5a0#commitcomment-7129512. After the control is in a $touched state, other $digest cycles are unnecesary. References #7673
Sets the ngModel controller property $touched to True and $untouched to False whenever a 'blur' event is triggered over a control with the ngModel directive. Also adds the $setTouched and $setUntouched methods to the NgModelController. References #583
|
I'm sorry, but I wasn't able to verify your Contributor License Agreement (CLA) signature. CLA signature is required for any code contributions to AngularJS. Please sign our CLA and ensure that the CLA signature email address and the email address in this PR's commits match. If you signed the CLA as a corporation, please let us know the company's name. Thanks a bunch! PS: If you signed the CLA in the past then most likely the email addresses don't match. Please sign the CLA again or update the email address in the commit of this PR. |
| @@ -2182,6 +2182,8 @@ var ngModelDirective = function() { | |||
| } | |||
|
|
|||
| element.on('blur', function(ev) { | |||
| if (modelCtrl.$touched) return; | |||
|
|
|||
| scope.$apply(function() { | |||
There was a problem hiding this comment.
Why not $evalAsync or $timeout instead?
Using $apply, at least in our directive is causing Error: [$rootScope:inprog] $apply already in progress since we are setting focus to other input during a current $apply which will at the same time make this blur event run and cause the error.
Here's plunker with the problem
There was a problem hiding this comment.
The recommended way to execute an expression in Angular from outside angular realm (DOM events) is to use scope.$apply.
The error in your directive comes from line 244 when the close method, which is executed inside the angular realm (a $digest cycle), calls a DOM method (focus()). Any other directive that binds to the focus DOM event and attempts to execute an expression in the angular realm using $apply will cause an $apply already in progress exception.
@kevinjamesus86 noticed that the input control would trigger a $digest
cycle every time it was blurred, adcc5a0#commitcomment-7129512.
After the control is in a $touched state, other $digest cycles are
unnecesary.
References #7673