SQUASH ME

Added in the `onChangesTtl` setting and `infchng` error for preventing overflow

Author: petebacondarwin

docs/content/error/$compile/infchng.ngdoc

@@ -0,0 +1,24 @@
+@ngdoc error
+@name $compile:infchng
+@fullName Unstable `$onChanges` hooks
+@description
+
+This error occurs when the application's model becomes unstable because some `$onChanges` hooks are causing updates which then trigger
+further calls to `$onChanges` that can never complete.
+Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
+
+For example, the situation can occur by setting up a `$onChanges()` hook which triggers an event on the component, which subsequently
+triggers the component's bound inputs to be updated:
+
+```html
+<c1 prop="a" on-change="a = -a"></c1>
+```
+
+```js
+Controller1.$onChanges = function() {
+  this.onChange();
+};
+```
+
+The maximum number of allowed iterations of the `$onChanges` hooks is controlled via TTL setting which can be configured via
+{@link ng.$compileProvider#onChangesTtl `$compileProvider.onChangesTtl`}.

src/ng/compile.js

@@ -1221,6 +1221,34 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
     return debugInfoEnabled;
   };
 
+
+  var TTL = 10;
+  /**
+   * @ngdoc method
+   * @name $compileProvider#onChangesTtl
+   * @description
+   *
+   * Sets the number of times `$onChanges` hooks can trigger new changes before giving up and
+   * assuming that the model is unstable.
+   *
+   * The current default is 10 iterations.
+   *
+   * In complex applications it's possible that dependencies between `$onChanges` hooks and bindings will result
+   * in several iterations of calls to these hooks. However if an application needs more than the default 10
+   * iterations to stabilize then you should investigate what is causing the model to continuously change during
+   * the `$onChanges` hook execution.
+   *
+   * Increasing the TTL could have performance implications, so you should not change it without proper justification.
+   *
+   * @param {number} limit The number of `$onChanges` hook iterations.
+   */
+  this.onChangesTtl = function(value) {
+    if (arguments.length) {
+      TTL = value;
+    }
+    return TTL;
+  };
+
   this.$get = [
             '$injector', '$interpolate', '$exceptionHandler', '$templateRequest', '$parse',
             '$controller', '$rootScope', '$sce', '$animate', '$$sanitizeUri',
@@ -1230,12 +1258,18 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
     var SIMPLE_ATTR_NAME = /^\w/;
     var specialAttrHolder = document.createElement('div');
 
+
+
+    var onChangesTtl;
     // The onChanges hooks should all be run together in a single digest
     // When changes occur, the call to trigger their hooks will be added to this queue
     var onChangesQueue;
 
     // This function is called in a $$postDigest to trigger all the onChanges hooks in a single digest
     function flushOnChangesQueue() {
+      if (!(onChangesTtl--)) {
+        throw $compileMinErr('infchng', '{0} $onChanges() iterations reached. Aborting!\n', TTL);
+      }
       // We must run this hook in an apply since the $$postDigest runs outside apply
       $rootScope.$apply(function() {
         for (var i = 0, ii = onChangesQueue.length; i < ii; ++i) {
@@ -3156,6 +3190,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         if (isFunction(destination.$onChanges) && currentValue !== previousValue) {
           // If we have not already scheduled the top level onChangesQueue handler then do so now
           if (!onChangesQueue) {
+            // Initialize the TTL tracker for tracking stack overflow
+            if (isUndefined(onChangesTtl)) { onChangesTtl = TTL; }
             scope.$$postDigest(flushOnChangesQueue);
             onChangesQueue = [];
           }

test/ng/compileSpec.js

@@ -3854,13 +3854,13 @@ describe('$compile', function() {
         inject(function($compile, $rootScope) {
 
           // Setup the directive with bindings that will keep updating the bound value forever
-          element = $compile('<c1 prop="a" on-change="a = -a"></outer>')($rootScope);
+          element = $compile('<c1 prop="a" on-change="a = -a"></c1>')($rootScope);
 
           // Update val to trigger the unstable onChanges, which will result in a
           // Range error - maximum call stack size exceeded
           expect(function() {
             $rootScope.$apply('a = 42');
-          }).toThrowError();
+          }).toThrowMinErr('$compile', 'infchng');
         });
       });
     });