diff options
| -rw-r--r-- | src/ng/directive/ngSwitch.js | 14 | ||||
| -rw-r--r-- | test/ng/directive/ngSwitchSpec.js | 62 |
2 files changed, 71 insertions, 5 deletions
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index aa04a998..88b1e701 100644 --- a/src/ng/directive/ngSwitch.js +++ b/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 }); }; } }); diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js index b817386c..85240b19 100644 --- a/test/ng/directive/ngSwitchSpec.js +++ b/test/ng/directive/ngSwitchSpec.js @@ -95,6 +95,68 @@ describe('ngSwitch', function() { })); + it('should always 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\'">' + |
