diff options
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; +  } +}); | 
