fix(compile): Fix for nested multi-element directives

Fix an issue with nested multi-element directives that are siblings
at the DOM level

Author: lgalfaso

src/ng/compile.js

@@ -357,7 +357,7 @@ function $CompileProvider($provide) {
 
     //================================
 
-    function compile($compileNodes, transcludeFn, maxPriority) {
+    function compile($compileNodes, transcludeFn, maxPriority, limitMaxPriorityToFirstElement) {
       if (!($compileNodes instanceof jqLite)) {
         // jquery always rewraps, whereas we need to preserve the original selector so that we can modify it.
         $compileNodes = jqLite($compileNodes);
@@ -369,7 +369,8 @@ function $CompileProvider($provide) {
           $compileNodes[index] = jqLite(node).wrap('<span></span>').parent()[0];
         }
       });
-      var compositeLinkFn = compileNodes($compileNodes, transcludeFn, $compileNodes, maxPriority);
+      var compositeLinkFn = compileNodes($compileNodes, transcludeFn, $compileNodes, maxPriority,
+        limitMaxPriorityToFirstElement);
       return function publicLinkFn(scope, cloneConnectFn){
         assertArg(scope, 'scope');
         // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart
@@ -418,17 +419,21 @@ function $CompileProvider($provide) {
      *        rootElement must be set the jqLite collection of the compile root. This is
      *        needed so that the jqLite collection items can be replaced with widgets.
      * @param {number=} max directive priority
+     * @param {boolean=} if the max priority should only apply to the first element in the list.
+     *        A true value here will make the maxPriority only apply to the first element on the
+     *        list while the other elements on the list will not have a maxPriority set
      * @returns {?function} A composite linking function of all of the matched directives or null.
      */
-    function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority) {
+    function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, limitMaxPriorityToFirstElement) {
       var linkFns = [],
           nodeLinkFn, childLinkFn, directives, attrs, linkFnFound;
 
       for(var i = 0; i < nodeList.length; i++) {
         attrs = new Attributes();
 
         // we must always refer to nodeList[i] since the nodes can be replaced underneath us.
-        directives = collectDirectives(nodeList[i], [], attrs, maxPriority);
+        directives = collectDirectives(nodeList[i], [], attrs,
+          (limitMaxPriorityToFirstElement && i != 0) ? undefined : maxPriority);
 
         nodeLinkFn = (directives.length)
             ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement)
@@ -646,13 +651,23 @@ function $CompileProvider($provide) {
             replaceWith($rootElement, jqLite($template[0]), compileNode);
             childTranscludeFn = compile($template, transcludeFn, terminalPriority);
           } else if (directiveValue == 'multi-element') {
-            childTranscludeFn = compile(jqLite(extractMultiElementTransclude(compileNode, directiveName)),
-                transcludeFn, terminalPriority);
+            // We need to compile a clone of the elements, but at the same time we have to be sure that these elements are siblings
+            var nestedContent = extractMultiElementTransclude(compileNode, directiveName);
+            var cloneContent = jqLite('<div></div>');
+            forEach(nestedContent, function(nestedElement) {
+              cloneContent.append(JQLiteClone(nestedElement));
+            });
+            childTranscludeFn = compile(cloneContent.contents(), transcludeFn, terminalPriority, true);
             $template = jqLite(compileNode);
             $compileNode = templateAttrs.$$element =
                 jqLite(document.createComment(' ' + directiveName + ': ' + templateAttrs[directiveName] + ' '));
             compileNode = $compileNode[0];
             replaceWith($rootElement, $template, compileNode);
+            forEach(nestedContent.splice(1),
+              function(toRemove) {
+                replaceWith($rootElement, jqLite(toRemove), document.createComment(' placeholder '));
+              }
+            );
           } else {
             $template = jqLite(JQLiteClone(compileNode)).contents();
             $compileNode.html(''); // clear contents
@@ -754,12 +769,6 @@ function $CompileProvider($provide) {
         } while(count > 0 && cursor);
         if (count > 0) throw Error('Unmatched ' + transcludeStart + '.');
         if (count < 0) throw Error('Unexpected ' + transcludeEnd + '.');
-        for (var j = 0; j < transcludeContent.length; ++j) {
-          c = transcludeContent[j];
-          transcludeContent[j] = JQLiteClone(transcludeContent[j]);
-          // The first element will be replaced by a comment
-          if (j != 0) jqLite(c).remove();
-        }
         return transcludeContent;
       }
 

test/ng/directive/ngRepeatStartSpec.js

@@ -428,6 +428,22 @@ describe('ngRepeatStart', function() {
   });
 
 
+  it('should repeat over nested repeats at the same level', function() {
+    element = $compile(
+      '<dl>' +
+        '<dt ng-repeat="item1 in array"  ng-repeat-start>{{item1}}|</dt>' +
+        '<dt ng-repeat="item2 in array2" ng-repeat-start>{{item2}}</dt>' +
+        '<dt ng-repeat-end>X</dt>' +
+        '<dt ng-repeat-end>Y</dt>' +
+      '</dl>')(scope);
+    scope.array = ['a', 'b'];
+    scope.array2 = ['d', 'e'];
+    scope.$digest();
+
+    expect(element.text()).toEqual('a|dXeXYb|dXeXY');
+  });
+
+
   it('should ignore non-array element properties when iterating over an array', function() {
     element = $compile('<ul><li ng-repeat-start ng-repeat="item in array">{{item}}</li><li ng-repeat-end>|</li></ul>')(scope);
     scope.array = ['a', 'b', 'c'];