aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngSwitch.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/ng/directive/ngSwitch.js')
-rw-r--r--src/ng/directive/ngSwitch.js112
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;
+ }
+});