perf(select): execute render after $digest cycle

wesleycho · IgorMinar · commit 6f7018d52fa4 · 2014-08-29T12:24:49.000-07:00
This is an optimization to defer execution of the render function in the select directive after the $digest cycle completes inside the $watchCollection expressions. This does a check to see if the render function is already registered in the $$postDigestQueue before it passes it into $$postDigest, guaranteeing that the DOM manipulation happens only in one execution after the model settles. Closes angular#8825
diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
@@ -224,6 +224,7 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
           optionsExp = attr.ngOptions,
           nullOption = false, // if false, user will not be able to select it (used by ngOptions)
           emptyOption,
+          renderScheduled = false,
           // we can't just jqLite('<option>') since jqLite is not smart enough
           // to create it in <select> and IE barfs otherwise.
           optionTemplate = jqLite(document.createElement('option')),
@@ -413,9 +414,19 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
 
         ctrl.$render = render;
 
-        scope.$watchCollection(valuesFn, render);
+        scope.$watchCollection(valuesFn, function () {
+          if (!renderScheduled) {
+            scope.$$postDigest(render);
+            renderScheduled = true;
+          }
+        });
         if ( multiple ) {
-          scope.$watchCollection(function() { return ctrl.$modelValue; }, render);
+          scope.$watchCollection(function() { return ctrl.$modelValue; }, function () {
+            if (!renderScheduled) {
+              scope.$$postDigest(render);
+              renderScheduled = true;
+            }
+          });
         }
 
         function getSelectedSet() {
@@ -438,6 +449,8 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
 
 
         function render() {
+          renderScheduled = false;
+
               // Temporary location for the option groups before we render them
           var optionGroups = {'':[]},
               optionGroupNames = [''],
