feat(ng:switch): Preserve the order of the elements not in the ng-switch

Preserve the order of the elements that are not part of a case nor default in
a ng-switch directive

Closes angular#1074

Author: lgalfaso

src/ng/directive/ngSwitch.js

@@ -6,13 +6,16 @@
  * @restrict EA
  *
  * @description
- * Conditionally change the DOM structure.
+ * Conditionally change the DOM structure. Elements within ngSwitch but without
+ * ngSwitchWhen or ngSwitchDefault directives will be preserved at the location
+ * as specified in the template
  *
  * @usageContent
  * <ANY ng-switch-when="matchValue1">...</ANY>
  *   <ANY ng-switch-when="matchValue2">...</ANY>
  *   ...
  *   <ANY ng-switch-default>...</ANY>
+ *   <ANY>...</ANY>
  *
  * @scope
  * @param {*} ngSwitch|on expression to match against <tt>ng-switch-when</tt>.
@@ -26,6 +29,7 @@
  *   are multiple default cases, all of them will be displayed when no other
  *   case match.
  *
+ *
  * @example
     <doc:example>
       <doc:source>
@@ -90,9 +94,9 @@ var ngSwitchDirective = valueFn({
         forEach(selectedTranscludes, function(selectedTransclude) {
           var selectedScope = scope.$new();
           selectedScopes.push(selectedScope);
-          selectedTransclude(selectedScope, function(caseElement) {
+          selectedTransclude.transclude(selectedScope, function(caseElement) {
             selectedElements.push(caseElement);
-            element.append(caseElement);
+            selectedTransclude.element.after(caseElement);
           });
         });
       }
@@ -107,7 +111,7 @@ var ngSwitchWhenDirective = ngDirective({
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
       ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []);
-      ctrl.cases['!' + attrs.ngSwitchWhen].push(transclude);
+      ctrl.cases['!' + attrs.ngSwitchWhen].push({ transclude: transclude, element: element });
     };
   }
 });
@@ -119,7 +123,7 @@ var ngSwitchDefaultDirective = ngDirective({
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
       ctrl.cases['?'] = (ctrl.cases['?'] || []);
-      ctrl.cases['?'].push(transclude);
+      ctrl.cases['?'].push({ transclude: transclude, element: element });
     };
   }
 });

test/ng/directive/ngSwitchSpec.js

@@ -95,6 +95,61 @@ describe('ngSwitch', function() {
   }));
 
 
+  it('should display the elements that do not match a switch', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li>always </li>' +
+        '<li ng-switch-when="1">one </li>' +
+        '<li ng-switch-when="2">two </li>' +
+        '<li ng-switch-default>other, </li>' +
+        '<li ng-switch-default>other too </li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('always other, other too ');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('always one ');
+  }));
+
+
+  it('should display the elements that do not have ngSwitchWhen nor ngSwitchDefault at the position specified in the template, when the first and last elements in the ngSwitch body do not have a ngSwitch* directive', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li>1</li>' +
+        '<li ng-switch-when="1">2</li>' +
+        '<li>3</li>' +
+        '<li ng-switch-when="2">4</li>' +
+        '<li ng-switch-default>5</li>' +
+        '<li>6</li>' +
+        '<li ng-switch-default>7</li>' +
+        '<li>8</li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('135678');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('12368');
+  }));
+
+
+  it('should display the elements that do not have ngSwitchWhen nor ngSwitchDefault at the position specified in the template when the first and last elements in the ngSwitch have a ngSwitch* directive', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li ng-switch-when="1">2</li>' +
+        '<li>3</li>' +
+        '<li ng-switch-when="2">4</li>' +
+        '<li ng-switch-default>5</li>' +
+        '<li>6</li>' +
+        '<li ng-switch-default>7</li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('3567');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('236');
+  }));
+
+
   it('should call change on switch', inject(function($rootScope, $compile) {
     element = $compile(
       '<ng:switch on="url" change="name=\'works\'">' +