fix($compile): ensure that hidden input values are correct after history.back

petebacondarwin · petebacondarwin · commit b8a0ecdd6189 · 2016-10-11T13:48:38.000+01:00
Due to the nature of some browser's PageCache/BFCache, returning to an Angular
app sometimes causes `input[hidden]` elements to retain the last value
that was stored before the page was navigated away from previously.

This is particularly problematic if the input has an interpolated value.
E.g. `&lt;input type="hidden" value="{{ 1 + 2 }}"&gt;` since when the browser
returns, instead of the original interpolation template, the HTML contains
the previous value `&lt;input type="hidden" value="3"&gt;`.

This commit instructs the browser not to attempt to reinstate the previous
value when navigating back in history by setting `autocomplete="off"` on
the hidden input element element.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -1030,13 +1030,17 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       var nodeType = node.nodeType,
           attrsMap = attrs.$attr,
           match,
+          nodeName,
           className;
 
       switch(nodeType) {
         case 1: /* Element */
+
+          nodeName = nodeName_(node).toLowerCase();
+
           // use the node name: <directive>
           addDirective(directives,
-              directiveNormalize(nodeName_(node).toLowerCase()), 'E', maxPriority, ignoreDirective);
+              directiveNormalize(nodeName), 'E', maxPriority, ignoreDirective);
 
           // iterate over the attributes
           for (var attr, name, nName, ngAttrName, value, isNgAttr, nAttrs = node.attributes,
@@ -1076,6 +1080,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             }
           }
 
+          if (nodeName === 'input' && node.getAttribute('type') === 'hidden') {
+            // Hidden input elements can have strange behaviour when navigating back to the page
+            // This tells the browser not to try to cache and reinstate previous values
+            node.setAttribute('autocomplete', 'off');
+          }
+
           // use class as directive
           className = node.className;
           if (isString(className) && className !== '') {
