From e46100f7097d9a8f174bdb9e15d4c6098395c3f2 Mon Sep 17 00:00:00 2001
From: Misko Hevery
Date: Fri, 24 May 2013 12:41:38 -0700
Subject: feat($compile): support multi-element directive

By appending  directive-start and directive-end to a
directive it is now possible to have the directive
act on a group of elements.

It is now possible to iterate over multiple elements like so:

<table>
  <tr ng-repeat-start="item in list">I get repeated</tr>
  <tr ng-repeat-end>I also get repeated</tr>
</table>
---
 test/jqLiteSpec.js     |  12 +++--
 test/ng/compileSpec.js | 125 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 4 deletions(-)

(limited to 'test')

diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js
index 1ebe6ad4..70c18d35 100644
--- a/test/jqLiteSpec.js
+++ b/test/jqLiteSpec.js
@@ -56,6 +56,9 @@ describe('jqLite', function() {
 
     it('should allow construction with html', function() {
       var nodes = jqLite('<div>1</div><span>2</span>');
+      expect(nodes[0].parentNode).toBeDefined();
+      expect(nodes[0].parentNode.nodeType).toBe(11); /** Document Fragment **/;
+      expect(nodes[0].parentNode).toBe(nodes[1].parentNode);
       expect(nodes.length).toEqual(2);
       expect(nodes[0].innerHTML).toEqual('1');
       expect(nodes[1].innerHTML).toEqual('2');
@@ -644,12 +647,13 @@ describe('jqLite', function() {
 
 
     it('should read/write value', function() {
-      var element = jqLite('<div>abc</div>');
-      expect(element.length).toEqual(1);
-      expect(element[0].innerHTML).toEqual('abc');
+      var element = jqLite('<div>ab</div><span>c</span>');
+      expect(element.length).toEqual(2);
+      expect(element[0].innerHTML).toEqual('ab');
+      expect(element[1].innerHTML).toEqual('c');
       expect(element.text()).toEqual('abc');
       expect(element.text('xyz') == element).toBeTruthy();
-      expect(element.text()).toEqual('xyz');
+      expect(element.text()).toEqual('xyzxyz');
     });
   });
 
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index bf3d0b77..95b2ab72 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -2718,4 +2718,129 @@ describe('$compile', function() {
       expect(element.attr('test4')).toBe('Misko');
     }));
   });
+
+
+  describe('multi-element directive', function() {
+    it('should group on link function', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div>' +
+              '<span ng-show-start="show"></span>' +
+              '<span ng-show-end></span>' +
+          '</div>')($rootScope);
+      $rootScope.$digest();
+      var spans = element.find('span');
+      expect(spans.eq(0).css('display')).toBe('none');
+      expect(spans.eq(1).css('display')).toBe('none');
+    }));
+
+
+    it('should group on compile function', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div>' +
+              '<span ng-repeat-start="i in [1,2]">{{i}}A</span>' +
+              '<span ng-repeat-end>{{i}}B;</span>' +
+          '</div>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('1A1B;2A2B;');
+    }));
+
+
+    it('should group on $root compile function', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div></div>' +
+              '<span ng-repeat-start="i in [1,2]">{{i}}A</span>' +
+              '<span ng-repeat-end>{{i}}B;</span>' +
+          '<div></div>')($rootScope);
+      $rootScope.$digest();
+      element = jqLite(element[0].parentNode.childNodes); // reset because repeater is top level.
+      expect(element.text()).toEqual('1A1B;2A2B;');
+    }));
+
+
+    it('should group on nested groups', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div></div>' +
+              '<div ng-repeat-start="i in [1,2]">{{i}}A</div>' +
+              '<span ng-bind-start="\'.\'"></span>' +
+              '<span ng-bind-end></span>' +
+              '<div ng-repeat-end>{{i}}B;</div>' +
+          '<div></div>')($rootScope);
+      $rootScope.$digest();
+      element = jqLite(element[0].parentNode.childNodes); // reset because repeater is top level.
+      expect(element.text()).toEqual('1A..1B;2A..2B;');
+    }));
+
+
+    it('should group on nested groups', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div></div>' +
+              '<div ng-repeat-start="i in [1,2]">{{i}}(</div>' +
+              '<span ng-repeat-start="j in [2,3]">{{j}}-</span>' +
+              '<span ng-repeat-end>{{j}}</span>' +
+              '<div ng-repeat-end>){{i}};</div>' +
+          '<div></div>')($rootScope);
+      $rootScope.$digest();
+      element = jqLite(element[0].parentNode.childNodes); // reset because repeater is top level.
+      expect(element.text()).toEqual('1(2-23-3)1;2(2-23-3)2;');
+    }));
+
+
+    it('should throw error if unterminated', function () {
+      module(function($compileProvider) {
+        $compileProvider.directive('foo', function() {
+          return {
+          };
+        });
+      });
+      inject(function($compile, $rootScope) {
+        expect(function() {
+          element = $compile(
+              '<div>' +
+                '<span foo-start></span>' +
+              '</div>');
+        }).toThrow("[NgErr51] Unterminated attribute, found 'foo-start' but no matching 'foo-end' found.");
+      });
+    });
+
+
+    it('should throw error if unterminated', function () {
+      module(function($compileProvider) {
+        $compileProvider.directive('foo', function() {
+          return {
+          };
+        });
+      });
+      inject(function($compile, $rootScope) {
+        expect(function() {
+          element = $compile(
+              '<div>' +
+                  '<span foo-start><span foo-end></span></span>' +
+              '</div>');
+        }).toThrow("[NgErr51] Unterminated attribute, found 'foo-start' but no matching 'foo-end' found.");
+      });
+    });
+
+
+    it('should support data- and x- prefix', inject(function($compile, $rootScope) {
+      $rootScope.show = false;
+      element = $compile(
+          '<div>' +
+              '<span data-ng-show-start="show"></span>' +
+              '<span data-ng-show-end></span>' +
+              '<span x-ng-show-start="show"></span>' +
+              '<span x-ng-show-end></span>' +
+          '</div>')($rootScope);
+      $rootScope.$digest();
+      var spans = element.find('span');
+      expect(spans.eq(0).css('display')).toBe('none');
+      expect(spans.eq(1).css('display')).toBe('none');
+      expect(spans.eq(2).css('display')).toBe('none');
+      expect(spans.eq(3).css('display')).toBe('none');
+    }));
+  });
 });
-- 
cgit v1.2.3