fix(ngMessages): don't crash when first transcluded message is removed

Under specific circumstances, ngMessages would go into an infinite loop and crash the
browser / page:
- At least two ngMessage elements are wrapped inside another element (e.g. ngTransclude)
- The first message is currently visible
- The first message is removed (e.g. when the whole ngMessages element is removed by an ngIf)

When a message is removed, it looks for a previous message - in this specific case it would misidentify
the second message for a previous message, which would then cause the first message to be marked as the
second message's next message, resulting in an infinite loop, and crash.

This fix ensures that only messages with an index lower than the starting message are considered
previous elements.

Fixes angular#14183

Author: Narretz

src/ngMessages/messages.js

@@ -441,12 +441,13 @@ angular.module('ngMessages', [])
            ctrl.reRender();
          };
 
-         function findPreviousMessage(parent, comment) {
+         function findPreviousMessage(parent, comment, key) {
            var prevNode = comment;
            var parentLookup = [];
            while (prevNode && prevNode !== parent) {
              var prevKey = prevNode.$$ngMessageNode;
-             if (prevKey && prevKey.length) {
+             if (prevKey && prevKey.length && prevKey < key) {
+               // Only add elements whose key is actually lower than the starting element's
                return messages[prevKey];
              }
 
@@ -466,7 +467,7 @@ angular.module('ngMessages', [])
            if (!ctrl.head) {
              ctrl.head = messageNode;
            } else {
-             var match = findPreviousMessage(parent, comment);
+             var match = findPreviousMessage(parent, comment, key);
              if (match) {
                messageNode.next = match.next;
                match.next = messageNode;
@@ -480,7 +481,7 @@ angular.module('ngMessages', [])
          function removeMessageNode(parent, comment, key) {
            var messageNode = messages[key];
 
-           var match = findPreviousMessage(parent, comment);
+           var match = findPreviousMessage(parent, comment, key);
            if (match) {
              match.next = messageNode.next;
            } else {

test/ngMessages/messagesSpec.js

@@ -412,6 +412,92 @@ describe('ngMessages', function() {
   }));
 
 
+  it('should not crash when the messages are transcluded, the first message is visible, and ngMessages is removed by ngIf', function() {
+
+    module(function($compileProvider) {
+      $compileProvider.directive('messageWrap', function() {
+        return {
+          transclude: true,
+          scope: {
+            col: '=col'
+          },
+          template: '<div ng-messages="col"><ng-transclude></ng-transclude></div>'
+        };
+      });
+    });
+
+    inject(function($rootScope, $compile) {
+
+      element = $compile('<div ng-if="show"><div message-wrap col="col">' +
+                         '        <div ng-message="required">Fill in the text field.</div>' +
+                         '        <div ng-message="extra">Extra error message.</div>' +
+                         '</div></div>')($rootScope);
+
+      $rootScope.$apply(function() {
+        $rootScope.show = true;
+        $rootScope.col = {
+          required: true,
+          extra: true
+        };
+      });
+
+      element = element.next();
+
+      expect(messageChildren(element).length).toBe(1);
+      expect(trim(element.text())).toEqual('Fill in the text field.');
+
+      $rootScope.$apply(function() {
+        $rootScope.col.required = true;
+        $rootScope.col.extra = false;
+      });
+
+      expect(messageChildren(element).length).toBe(1);
+      expect(trim(element.text())).toEqual('Fill in the text field.');
+
+      $rootScope.$apply('show = false');
+
+      expect(messageChildren(element).length).toBe(0);
+    });
+  });
+
+
+  it('should not crash when the first of two nested messages is removed', function() {
+
+    module(function($compileProvider) {
+      $compileProvider.directive('removeMe', function() {
+        return {
+          link: function(scope, element) {
+            scope.$watch('hide', function(newVal) {
+              if (newVal === true) element.remove();
+            });
+          }
+        };
+      });
+    });
+
+    inject(function($rootScope, $compile) {
+
+      element = $compile('<div ng-messages="col"><div class="wrapper">' +
+                         '        <div remove-me ng-message="required">Fill in the text field.</div>' +
+                         '        <div ng-message="extra">Extra error message.</div>' +
+                         '</div></div>')($rootScope);
+
+      $rootScope.$apply(function() {
+        $rootScope.col = {
+          required: true,
+          extra: false
+        };
+      });
+
+      expect(messageChildren(element).length).toBe(1);
+      expect(trim(element.text())).toEqual('Fill in the text field.');
+
+      $rootScope.$apply('hide = true');
+
+      expect(messageChildren(element).length).toBe(0);
+    });
+  });
+
   // issue #12856
   it('should only detach the message object that is associated with the message node being removed',
     inject(function($rootScope, $compile, $animate) {