feat(ngRepeat): use block separator comments

Issue: multi-elements ng-repeat (ng-repeat-start, ng-repeat-end) can contain elements with a trancluding directive. This directive changes content of the row (template) and ng-repeat does not work correctly (when removing/moving rows), because ng-repeat works with the original template (elements).

This changes ng-repeat behavior to traverse the DOM to find current elements everytime we are moving/removing rows (if the template has multiple elements).

Closes #3104

1 files changed, 23 insertions, 4 deletions

diff --git a/test/BinderSpec.js b/test/BinderSpec.js
index 3c204b64..b553c68d 100644
--- a/test/BinderSpec.js
+++ b/test/BinderSpec.js
@@ -96,7 +96,9 @@ describe('Binder', function() {
         '<ul>' +
           '<!-- ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">A</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">B</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
         '</ul>');
 
     items.unshift({a: 'C'});
@@ -105,8 +107,11 @@ describe('Binder', function() {
         '<ul>' +
           '<!-- ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">C</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">A</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">B</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
         '</ul>');
 
     items.shift();
@@ -115,7 +120,9 @@ describe('Binder', function() {
         '<ul>' +
           '<!-- ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">A</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
           '<li ng-bind="item.a" ng-repeat="item in model.items">B</li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
         '</ul>');
 
     items.shift();
@@ -134,6 +141,7 @@ describe('Binder', function() {
         '<ul>' +
           '<!-- ngRepeat: item in model.items -->' +
           '<li ng-repeat="item in model.items"><span ng-bind="item.a">A</span></li>' +
+          '<!-- end ngRepeat: item in model.items -->' +
         '</ul>');
   }));
 
@@ -148,15 +156,15 @@ describe('Binder', function() {
     $rootScope.items = items;
 
     $rootScope.$apply();
-    expect(element[0].childNodes.length - 1).toEqual(0);
+    expect(element[0].childNodes.length).toEqual(1);
 
     items.name = 'misko';
     $rootScope.$apply();
-    expect(element[0].childNodes.length - 1).toEqual(1);
+    expect(element[0].childNodes.length).toEqual(3);
 
     delete items.name;
     $rootScope.$apply();
-    expect(element[0].childNodes.length - 1).toEqual(0);
+    expect(element[0].childNodes.length).toEqual(1);
   }));
 
   it('IfTextBindingThrowsErrorDecorateTheSpan', function() {
@@ -223,13 +231,19 @@ describe('Binder', function() {
           '<div name="a" ng-repeat="m in model">'+
             '<!-- ngRepeat: i in m.item -->' +
             '<ul name="a1" ng-repeat="i in m.item"></ul>'+
+            '<!-- end ngRepeat: i in m.item -->' +
             '<ul name="a2" ng-repeat="i in m.item"></ul>'+
+            '<!-- end ngRepeat: i in m.item -->' +
           '</div>'+
+          '<!-- end ngRepeat: m in model -->' +
           '<div name="b" ng-repeat="m in model">'+
             '<!-- ngRepeat: i in m.item -->' +
             '<ul name="b1" ng-repeat="i in m.item"></ul>'+
+            '<!-- end ngRepeat: i in m.item -->' +
             '<ul name="b2" ng-repeat="i in m.item"></ul>'+
+            '<!-- end ngRepeat: i in m.item -->' +
           '</div>' +
+          '<!-- end ngRepeat: m in model -->' +
         '</div>');
   }));
 
@@ -306,15 +320,18 @@ describe('Binder', function() {
         '<div ng-repeat="i in [0,1]" ng-class-even="\'e\'" ng-class-odd="\'o\'"></div>' +
       '</div>')($rootScope);
     $rootScope.$apply();
+
     var d1 = jqLite(element[0].childNodes[1]);
-    var d2 = jqLite(element[0].childNodes[2]);
+    var d2 = jqLite(element[0].childNodes[3]);
     expect(d1.hasClass('o')).toBeTruthy();
     expect(d2.hasClass('e')).toBeTruthy();
     expect(sortedHtml(element)).toBe(
        '<div>' +
         '<!-- ngRepeat: i in [0,1] -->' +
         '<div class="o" ng-class-even="\'e\'" ng-class-odd="\'o\'" ng-repeat="i in [0,1]"></div>' +
+        '<!-- end ngRepeat: i in [0,1] -->' +
         '<div class="e" ng-class-even="\'e\'" ng-class-odd="\'o\'" ng-repeat="i in [0,1]"></div>' +
+        '<!-- end ngRepeat: i in [0,1] -->' +
         '</div>');
   }));
 
@@ -420,7 +437,9 @@ describe('Binder', function() {
         '<ul>' +
           '<!-- ngRepeat: (k,v) in {a:0,b:1} -->' +
           '<li ng-bind=\"k + v\" ng-repeat="(k,v) in {a:0,b:1}">a0</li>' +
+          '<!-- end ngRepeat: (k,v) in {a:0,b:1} -->' +
           '<li ng-bind=\"k + v\" ng-repeat="(k,v) in {a:0,b:1}">b1</li>' +
+          '<!-- end ngRepeat: (k,v) in {a:0,b:1} -->' +
         '</ul>');
   }));