fix(ngMessages): ensure that the ngMessagesInclude element is persisted in

the DOM

NgRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the
ngMessagesInclude directive is persisted in the DOM and its downloaded
template code will be placed inside of that element. Despite there now being
an extra child container within the ngMessages element, the selection
process of finding the next message to display still works in the same
way.

BREAKING CHANGE:

From here on the ngMessageInclude directive will be persisted in the dom
alongside any adjacent ngMessage elements. The interior ngMessage
elements present within the ngMessageInclude template will be stored as
child elements. The reasoning for this is to avoid any collision with
ngRepeat or any other directive elements that may cause problems with
inherited controllers, scopes and transclusion.

This patch shouldn't have any effect on your JavaScript code, however
when it comes to animations and CSS styling please note that the
structure of DOM child elements is different.

```html
<!-- before (1.4.0-beta.5 and lower) -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-message="errorA">...</div>
  <div ng-message="errorB">...</div>

  <div ng-message="error10">...</div>
<div>

<!-- now -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-messages-include="aAndB.html">
    <div ng-message="errorA">...</div>
    <div ng-message="errorB">...</div>
  </div>

  <div ng-message="error10">...</div>
<div>
```

Closes #11196

Author: matsko

src/ngMessages/messages.js

@@ -496,31 +496,16 @@ angular.module('ngMessages', [])
     * @param {string} ngMessagesInclude|src a string value corresponding to the remote template.
     */
    .directive('ngMessagesInclude',
-     ['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
+     ['$templateRequest', '$compile', function($templateRequest, $compile) {
 
      return {
        restrict: 'AE',
-       require: '^^ngMessages',
-       compile: function(element, attrs) {
-         var comment = jqLite($document[0].createComment(' ngMessagesInclude: '));
-         element.after(comment);
-
-         return function($scope, $element, attrs, ngMessagesCtrl) {
-           // we're removing this since we only need access to the newly
-           // created comment node as an anchor.
-           element.remove();
-
-           $templateRequest(attrs.ngMessagesInclude || attrs.src).then(function(html) {
-             var elements = jqLite('<div></div>').html(html).contents();
-             var cursor = comment;
-             forEach(elements, function(elm) {
-               elm = jqLite(elm);
-               cursor.after(elm);
-               cursor = elm;
-             });
-             $compile(elements)($scope);
-           });
-         };
+       require: '^^ngMessages', // we only require this for validation sake
+       link: function($scope, element, attrs) {
+         $templateRequest(attrs.ngMessagesInclude || attrs.src).then(function(html) {
+           element.html(html);
+           $compile(element.contents())($scope);
+         });
        }
      };
    }])

test/ngMessages/messagesSpec.js

@@ -4,6 +4,10 @@ describe('ngMessages', function() {
   beforeEach(inject.strictDi());
   beforeEach(module('ngMessages'));
 
+  function messageChildren(element) {
+    return (element.length ? element[0] : element).querySelectorAll('[ng-message], [ng-message-exp]');
+  }
+
   function they(msg, vals, spec, focus) {
     forEach(vals, function(val, key) {
       var m = msg.replace('$prop', key);
@@ -346,29 +350,29 @@ describe('ngMessages', function() {
       ];
     });
 
-    expect(messageChildren().length).toBe(0);
+    expect(messageChildren(element).length).toBe(0);
     expect(trim(element.text())).toEqual("");
 
     $rootScope.$apply(function() {
       $rootScope.col = { hair: true };
     });
 
-    expect(messageChildren().length).toBe(1);
+    expect(messageChildren(element).length).toBe(1);
     expect(trim(element.text())).toEqual("Your hair is too long");
 
     $rootScope.$apply(function() {
       $rootScope.col = { age: true, hair: true};
     });
 
-    expect(messageChildren().length).toBe(1);
+    expect(messageChildren(element).length).toBe(1);
     expect(trim(element.text())).toEqual("Your age is incorrect");
 
     $rootScope.$apply(function() {
       // remove the age!
       $rootScope.items.shift();
     });
 
-    expect(messageChildren().length).toBe(1);
+    expect(messageChildren(element).length).toBe(1);
     expect(trim(element.text())).toEqual("Your hair is too long");
 
     $rootScope.$apply(function() {
@@ -377,12 +381,8 @@ describe('ngMessages', function() {
       $rootScope.col.primary = true;
     });
 
-    expect(messageChildren().length).toBe(1);
+    expect(messageChildren(element).length).toBe(1);
     expect(trim(element.text())).toEqual("Enter something");
-
-    function messageChildren() {
-      return element[0].querySelectorAll('[ng-message], [ng-message-exp]');
-    }
   }));
 
 
@@ -437,7 +437,7 @@ describe('ngMessages', function() {
           };
         });
 
-        expect(element.children().length).toBe(1);
+        expect(messageChildren(element).length).toBe(1);
         expect(trim(element.text())).toEqual("A");
 
         $rootScope.$apply(function() {
@@ -446,11 +446,108 @@ describe('ngMessages', function() {
           };
         });
 
-        expect(element.children().length).toBe(1);
+        expect(messageChildren(element).length).toBe(1);
         expect(trim(element.text())).toEqual("C");
       });
     });
 
+    they('should work with a dynamic collection model which is managed by ngRepeat',
+      {'<div ng-messages-include="...">': '<div ng-messages="item">' +
+                                            '<div ng-messages-include="abc.html"></div>' +
+                                          '</div>',
+       '<ng-messages-include src="...">': '<ng-messages for="item">' +
+                                            '<ng-messages-include src="abc.html"></ng-messages-include>' +
+                                          '</ng-messages>'},
+    function(html) {
+      inject(function($compile, $rootScope, $templateCache) {
+        $templateCache.put('abc.html', '<div ng-message="a">A</div>' +
+                                       '<div ng-message="b">B</div>' +
+                                       '<div ng-message="c">C</div>');
+
+        html = '<div><div ng-repeat="item in items">' + html + '</div></div>';
+        $rootScope.items = [ {}, {}, {} ];
+
+        element = $compile(html)($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.items[0].a = true;
+          $rootScope.items[1].b = true;
+          $rootScope.items[2].c = true;
+        });
+
+        var elements = element[0].querySelectorAll('[ng-repeat]');
+
+        expect(messageChildren(element).length).toBe(3);
+        expect(messageChildren(elements[0]).length).toBe(1);
+        expect(messageChildren(elements[1]).length).toBe(1);
+        expect(messageChildren(elements[2]).length).toBe(1);
+
+        expect(element.text().trim()).toBe('ABC');
+
+        $rootScope.$apply(function() {
+          $rootScope.items[0].a = false;
+          $rootScope.items[0].c = true;
+
+          $rootScope.items[1].b = false;
+
+          $rootScope.items[2].c = false;
+          $rootScope.items[2].a = true;
+        });
+
+        expect(element.text().trim()).toBe('CA');
+
+        $rootScope.$apply(function() {
+          $rootScope.items[1].b = true;
+          $rootScope.items.reverse();
+        });
+
+        expect(element.text().trim()).toBe('ABC');
+      });
+    });
+
+    they('should retain the messages include container within the children of ngMessages and make sure the order is the same',
+      {'<div ng-messages-include="...">': '<div ng-messages="data" ng-messages-multiple="true">' +
+                                            '<div ng-message="0">0</div>' +
+                                            '<div ng-messages-include="abc.html"></div>' +
+                                            '<div ng-message="X">X</div>' +
+                                          '</div>',
+       '<ng-messages-include src="...">': '<ng-messages for="data" multiple="true">' +
+                                            '<div ng-message="0">0</div>' +
+                                            '<ng-messages-include src="abc.html"></ng-messages-include>' +
+                                            '<div ng-message="X">X</div>' +
+                                          '</ng-messages>'},
+    function(html) {
+      inject(function($compile, $rootScope, $templateCache) {
+        $templateCache.put('abc.html', '<div ng-message="a">A</div>' +
+                                       '<div ng-message="b">B</div>' +
+                                       '<div ng-message="c">C</div>');
+
+        element = $compile(html)($rootScope);
+
+        var includeContainer = element[0].querySelector('ng-messages-include, [ng-messages-include]');
+        expect(includeContainer).toBeTruthy();
+        expect(includeContainer.parentNode).toBe(element[0]);
+
+        $rootScope.$apply(function() {
+          $rootScope.data = {
+            '0': true,
+            'a': 1,
+            'b': 2,
+            'c': 3,
+            'X': true
+          };
+        });
+
+        expect(messageChildren(includeContainer).length).toBe(3);
+        expect(messageChildren(element).length).toBe(5);
+
+        var children = element.children();
+        var firstElement = children[0];
+        var lastElement = children[children.length - 1];
+        expect(firstElement).toBe(includeContainer.previousElementSibling);
+        expect(lastElement).toBe(includeContainer.nextElementSibling);
+      });
+    });
+
     it('should cache the template after download',
       inject(function($rootScope, $compile, $templateCache, $httpBackend) {
 
@@ -484,13 +581,13 @@ describe('ngMessages', function() {
 
       $rootScope.$digest();
 
-      expect(element.children().length).toBe(1);
+      expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual("Your value is that of failure");
 
       $httpBackend.flush();
       $rootScope.$digest();
 
-      expect(element.children().length).toBe(1);
+      expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual("You did not enter a value");
     }));
 
@@ -515,7 +612,7 @@ describe('ngMessages', function() {
         };
       });
 
-      expect(element.children().length).toBe(1);
+      expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual("AAA");
 
       $rootScope.$apply(function() {
@@ -525,7 +622,7 @@ describe('ngMessages', function() {
         };
       });
 
-      expect(element.children().length).toBe(1);
+      expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual("B");
 
       $rootScope.$apply(function() {
@@ -534,7 +631,7 @@ describe('ngMessages', function() {
         };
       });
 
-      expect(element.children().length).toBe(1);
+      expect(messageChildren(element).length).toBe(1);
       expect(trim(element.text())).toEqual("C");
     }));
 
@@ -584,14 +681,14 @@ describe('ngMessages', function() {
         };
       });
 
-      expect(element.children().length).toBe(2);
+      expect(messageChildren(element).length).toBe(2);
       expect(s(element.text())).toEqual("XZ");
 
       $rootScope.$apply(function() {
         $rootScope.data.y = {};
       });
 
-      expect(element.children().length).toBe(3);
+      expect(messageChildren(element).length).toBe(3);
       expect(s(element.text())).toEqual("XYZ");
     }));
 
@@ -616,14 +713,14 @@ describe('ngMessages', function() {
         };
       });
 
-      expect(element.children().length).toBe(2);
+      expect(messageChildren(element).length).toBe(2);
       expect(s(element.text())).toEqual("ZZZX");
 
       $rootScope.$apply(function() {
         $rootScope.data.y = {};
       });
 
-      expect(element.children().length).toBe(3);
+      expect(messageChildren(element).length).toBe(3);
       expect(s(element.text())).toEqual("YYYZZZX");
     }));
   });