diff options
| author | Misko Hevery | 2012-03-23 14:03:24 -0700 |
|---|---|---|
| committer | Misko Hevery | 2012-03-28 11:16:35 -0700 |
| commit | 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch) | |
| tree | e7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngSwitch.js | |
| parent | 944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff) | |
| download | angular.js-2430f52bb97fa9d682e5f028c977c5bf94c5ec38.tar.bz2 | |
chore(module): move files around in preparation for more modules
Diffstat (limited to 'src/ng/directive/ngSwitch.js')
| -rw-r--r-- | src/ng/directive/ngSwitch.js | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js new file mode 100644 index 00000000..16b0c4d4 --- /dev/null +++ b/src/ng/directive/ngSwitch.js @@ -0,0 +1,112 @@ +'use strict'; + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-switch + * @restrict EA + * + * @description + * Conditionally change the DOM structure. + * + * @usageContent + * <any ng-switch-when="matchValue1">...</any> + * <any ng-switch-when="matchValue2">...</any> + * ... + * <any ng-switch-default>...</any> + * + * @scope + * @param {*} ng-switch|on expression to match against <tt>ng-switch-when</tt>. + * @paramDescription + * On child elments add: + * + * * `ng-switch-when`: the case statement to match against. If match then this + * case will be displayed. + * * `ng-switch-default`: the default case when no other casses match. + * + * @example + <doc:example> + <doc:source> + <script> + function Ctrl($scope) { + $scope.items = ['settings', 'home', 'other']; + $scope.selection = $scope.items[0]; + } + </script> + <div ng-controller="Ctrl"> + <select ng-model="selection" ng-options="item for item in items"> + </select> + <tt>selection={{selection}}</tt> + <hr/> + <div ng-switch on="selection" > + <div ng-switch-when="settings">Settings Div</div> + <span ng-switch-when="home">Home Span</span> + <span ng-switch-default>default</span> + </div> + </div> + </doc:source> + <doc:scenario> + it('should start in settings', function() { + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/); + }); + it('should change to home', function() { + select('selection').option('home'); + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/); + }); + it('should select deafault', function() { + select('selection').option('other'); + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/); + }); + </doc:scenario> + </doc:example> + */ +var NG_SWITCH = 'ng-switch'; +var ngSwitchDirective = valueFn({ + restrict: 'EA', + compile: function(element, attr) { + var watchExpr = attr.ngSwitch || attr.on, + cases = {}; + + element.data(NG_SWITCH, cases); + return function(scope, element){ + var selectedTransclude, + selectedElement, + selectedScope; + + scope.$watch(watchExpr, function(value) { + if (selectedElement) { + selectedScope.$destroy(); + selectedElement.remove(); + selectedElement = selectedScope = null; + } + if ((selectedTransclude = cases['!' + value] || cases['?'])) { + scope.$eval(attr.change); + selectedScope = scope.$new(); + selectedTransclude(selectedScope, function(caseElement) { + selectedElement = caseElement; + element.append(caseElement); + }); + } + }); + }; + } +}); + +var ngSwitchWhenDirective = ngDirective({ + transclude: 'element', + priority: 500, + compile: function(element, attrs, transclude) { + var cases = element.inheritedData(NG_SWITCH); + assertArg(cases); + cases['!' + attrs.ngSwitchWhen] = transclude; + } +}); + +var ngSwitchDefaultDirective = ngDirective({ + transclude: 'element', + priority: 500, + compile: function(element, attrs, transclude) { + var cases = element.inheritedData(NG_SWITCH); + assertArg(cases); + cases['?'] = transclude; + } +}); |
