chore: rename switch to ng-switch
This commit is contained in:
parent
78d3f62b6a
commit
e9f236b70f
10
modules/angular2/directives.js
vendored
10
modules/angular2/directives.js
vendored
@ -9,13 +9,13 @@ import {CONST_EXPR} from './src/facade/lang';
|
|||||||
import {For} from './src/directives/for';
|
import {For} from './src/directives/for';
|
||||||
import {NgIf} from './src/directives/ng_if';
|
import {NgIf} from './src/directives/ng_if';
|
||||||
import {NgNonBindable} from './src/directives/ng_non_bindable';
|
import {NgNonBindable} from './src/directives/ng_non_bindable';
|
||||||
import {Switch, SwitchWhen, SwitchDefault} from './src/directives/switch';
|
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';
|
||||||
|
|
||||||
export * from './src/directives/class';
|
export * from './src/directives/class';
|
||||||
export * from './src/directives/for';
|
export * from './src/directives/for';
|
||||||
export * from './src/directives/ng_if';
|
export * from './src/directives/ng_if';
|
||||||
export * from './src/directives/ng_non_bindable';
|
export * from './src/directives/ng_non_bindable';
|
||||||
export * from './src/directives/switch';
|
export * from './src/directives/ng_switch';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A collection of the Angular core directives that are likely to be used in each and every Angular application.
|
* A collection of the Angular core directives that are likely to be used in each and every Angular application.
|
||||||
@ -24,7 +24,7 @@ export * from './src/directives/switch';
|
|||||||
* instead of writing:
|
* instead of writing:
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* import {If, For, Switch, SwitchWhen, SwitchDefault} from 'angular2/angular2';
|
* import {If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
|
||||||
* import {OtherDirective} from 'myDirectives';
|
* import {OtherDirective} from 'myDirectives';
|
||||||
*
|
*
|
||||||
* @Component({
|
* @Component({
|
||||||
@ -32,7 +32,7 @@ export * from './src/directives/switch';
|
|||||||
* })
|
* })
|
||||||
* @View({
|
* @View({
|
||||||
* templateUrl: 'myComponent.html',
|
* templateUrl: 'myComponent.html',
|
||||||
* directives: [If, For, Switch, SwitchWhen, SwitchDefault, OtherDirective]
|
* directives: [If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
|
||||||
* })
|
* })
|
||||||
* export class MyComponent {
|
* export class MyComponent {
|
||||||
* ...
|
* ...
|
||||||
@ -58,5 +58,5 @@ export * from './src/directives/switch';
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const coreDirectives:List = CONST_EXPR([
|
export const coreDirectives:List = CONST_EXPR([
|
||||||
For, NgIf, NgNonBindable, Switch, SwitchWhen, SwitchDefault
|
For, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault
|
||||||
]);
|
]);
|
||||||
|
@ -24,39 +24,39 @@ class SwitchView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The `Switch` directive is used to conditionally swap DOM structure on your template based on a
|
* The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
|
||||||
* scope expression.
|
* scope expression.
|
||||||
* Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
|
* Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
|
||||||
* preserved at the location as specified in the template.
|
* preserved at the location as specified in the template.
|
||||||
*
|
*
|
||||||
* `Switch` simply chooses nested elements and makes them visible based on which element matches
|
* `NgSwitch` simply chooses nested elements and makes them visible based on which element matches
|
||||||
* the value obtained from the evaluated expression. In other words, you define a container element
|
* the value obtained from the evaluated expression. In other words, you define a container element
|
||||||
* (where you place the directive), place an expression on the **`[switch]="..."` attribute**),
|
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
|
||||||
* define any inner elements inside of the directive and place a `[switch-when]` attribute per
|
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
|
||||||
* element.
|
* element.
|
||||||
* The when attribute is used to inform Switch which element to display when the expression is
|
* The when attribute is used to inform NgSwitch which element to display when the expression is
|
||||||
* evaluated. If a matching expression is not found via a when attribute then an element with the
|
* evaluated. If a matching expression is not found via a when attribute then an element with the
|
||||||
* default attribute is displayed.
|
* default attribute is displayed.
|
||||||
*
|
*
|
||||||
* # Example:
|
* # Example:
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* <ANY [switch]="expression">
|
* <ANY [ng-switch]="expression">
|
||||||
* <template [switch-when]="whenExpression1">...</template>
|
* <template [ng-switch-when]="whenExpression1">...</template>
|
||||||
* <template [switch-when]="whenExpression1">...</template>
|
* <template [ng-switch-when]="whenExpression1">...</template>
|
||||||
* <template [switch-default]>...</template>
|
* <template [ng-switch-default]>...</template>
|
||||||
* </ANY>
|
* </ANY>
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @exportedAs angular2/directives
|
* @exportedAs angular2/directives
|
||||||
*/
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[switch]',
|
selector: '[ng-switch]',
|
||||||
properties: {
|
properties: {
|
||||||
'value': 'switch'
|
'ngSwitch': 'ngSwitch'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class Switch {
|
export class NgSwitch {
|
||||||
_switchValue: any;
|
_switchValue: any;
|
||||||
_useDefault: boolean;
|
_useDefault: boolean;
|
||||||
_valueViews: Map;
|
_valueViews: Map;
|
||||||
@ -68,7 +68,7 @@ export class Switch {
|
|||||||
this._useDefault = false;
|
this._useDefault = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
set value(value) {
|
set ngSwitch(value) {
|
||||||
// Empty the currently active ViewContainers
|
// Empty the currently active ViewContainers
|
||||||
this._emptyAllActiveViews();
|
this._emptyAllActiveViews();
|
||||||
|
|
||||||
@ -150,32 +150,32 @@ export class Switch {
|
|||||||
/**
|
/**
|
||||||
* Defines a case statement as an expression.
|
* Defines a case statement as an expression.
|
||||||
*
|
*
|
||||||
* If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
|
* If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed.
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* // match against a context variable
|
* // match against a context variable
|
||||||
* <template [switch-when]="contextVariable">...</template>
|
* <template [ng-switch-when]="contextVariable">...</template>
|
||||||
*
|
*
|
||||||
* // match against a constant string
|
* // match against a constant string
|
||||||
* <template [switch-when]="'stringValue'">...</template>
|
* <template [ng-switch-when]="'stringValue'">...</template>
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @exportedAs angular2/directives
|
* @exportedAs angular2/directives
|
||||||
*/
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[switch-when]',
|
selector: '[ng-switch-when]',
|
||||||
properties: {
|
properties: {
|
||||||
'when' : 'switch-when'
|
'ngSwitchWhen' : 'ngSwitchWhen'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class SwitchWhen {
|
export class NgSwitchWhen {
|
||||||
_value: any;
|
_value: any;
|
||||||
_switch: Switch;
|
_switch: NgSwitch;
|
||||||
_view: SwitchView;
|
_view: SwitchView;
|
||||||
|
|
||||||
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: Switch) {
|
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: NgSwitch) {
|
||||||
// `_whenDefault` is used as a marker for a not yet initialized value
|
// `_whenDefault` is used as a marker for a not yet initialized value
|
||||||
this._value = _whenDefault;
|
this._value = _whenDefault;
|
||||||
this._switch = sswitch;
|
this._switch = sswitch;
|
||||||
@ -186,7 +186,7 @@ export class SwitchWhen {
|
|||||||
this._switch
|
this._switch
|
||||||
}
|
}
|
||||||
|
|
||||||
set when(value) {
|
set ngSwitchWhen(value) {
|
||||||
this._switch._onWhenValueChanged(this._value, value, this._view);
|
this._switch._onWhenValueChanged(this._value, value, this._view);
|
||||||
this._value = value;
|
this._value = value;
|
||||||
}
|
}
|
||||||
@ -196,21 +196,21 @@ export class SwitchWhen {
|
|||||||
/**
|
/**
|
||||||
* Defines a default case statement.
|
* Defines a default case statement.
|
||||||
*
|
*
|
||||||
* Default case statements are displayed when no `SwitchWhen` match the `switch` value.
|
* Default case statements are displayed when no `NgSwitchWhen` match the `switch` value.
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* <template [switch-default]>...</template>
|
* <template [ng-switch-default]>...</template>
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @exportedAs angular2/directives
|
* @exportedAs angular2/directives
|
||||||
*/
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[switch-default]'
|
selector: '[ng-switch-default]'
|
||||||
})
|
})
|
||||||
export class SwitchDefault {
|
export class NgSwitchDefault {
|
||||||
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: Switch) {
|
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef, @Parent() sswitch: NgSwitch) {
|
||||||
sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef));
|
sswitch._registerView(_whenDefault, new SwitchView(viewContainer, protoViewRef));
|
||||||
}
|
}
|
||||||
}
|
}
|
38
modules/angular2/test/directives/switch_spec.js
vendored
38
modules/angular2/test/directives/switch_spec.js
vendored
@ -15,7 +15,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
|
|||||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
|
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from '../../src/directives/ng_switch';
|
||||||
|
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
|
|
||||||
@ -24,9 +24,9 @@ export function main() {
|
|||||||
describe('switch value changes', () => {
|
describe('switch value changes', () => {
|
||||||
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
var template = '<div>' +
|
var template = '<div>' +
|
||||||
'<ul [switch]="switchValue">' +
|
'<ul [ng-switch]="switchValue">' +
|
||||||
'<template [switch-when]="\'a\'"><li>when a</li></template>' +
|
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
|
||||||
'<template [switch-when]="\'b\'"><li>when b</li></template>' +
|
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
|
||||||
'</ul></div>';
|
'</ul></div>';
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||||
@ -48,9 +48,9 @@ export function main() {
|
|||||||
it('should switch amongst when values with fallback to default',
|
it('should switch amongst when values with fallback to default',
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
var template = '<div>' +
|
var template = '<div>' +
|
||||||
'<ul [switch]="switchValue">' +
|
'<ul [ng-switch]="switchValue">' +
|
||||||
'<li template="switch-when \'a\'">when a</li>' +
|
'<li template="ng-switch-when \'a\'">when a</li>' +
|
||||||
'<li template="switch-default">when default</li>' +
|
'<li template="ng-switch-default">when default</li>' +
|
||||||
'</ul></div>';
|
'</ul></div>';
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||||
@ -72,13 +72,13 @@ export function main() {
|
|||||||
it('should support multiple whens with the same value',
|
it('should support multiple whens with the same value',
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
var template = '<div>' +
|
var template = '<div>' +
|
||||||
'<ul [switch]="switchValue">' +
|
'<ul [ng-switch]="switchValue">' +
|
||||||
'<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
|
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
|
||||||
'<template [switch-when]="\'b\'"><li>when b1;</li></template>' +
|
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
|
||||||
'<template [switch-when]="\'a\'"><li>when a2;</li></template>' +
|
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
|
||||||
'<template [switch-when]="\'b\'"><li>when b2;</li></template>' +
|
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
|
||||||
'<template [switch-default]><li>when default1;</li></template>' +
|
'<template [ng-switch-default]><li>when default1;</li></template>' +
|
||||||
'<template [switch-default]><li>when default2;</li></template>' +
|
'<template [ng-switch-default]><li>when default2;</li></template>' +
|
||||||
'</ul></div>';
|
'</ul></div>';
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||||
@ -102,10 +102,10 @@ export function main() {
|
|||||||
it('should switch amongst when values',
|
it('should switch amongst when values',
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
var template = '<div>' +
|
var template = '<div>' +
|
||||||
'<ul [switch]="switchValue">' +
|
'<ul [ng-switch]="switchValue">' +
|
||||||
'<template [switch-when]="when1"><li>when 1;</li></template>' +
|
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
|
||||||
'<template [switch-when]="when2"><li>when 2;</li></template>' +
|
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
|
||||||
'<template [switch-default]><li>when default;</li></template>' +
|
'<template [ng-switch-default]><li>when default;</li></template>' +
|
||||||
'</ul></div>';
|
'</ul></div>';
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||||
@ -139,7 +139,7 @@ export function main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
@Component({selector: 'test-cmp'})
|
||||||
@View({directives: [Switch, SwitchWhen, SwitchDefault]})
|
@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
|
||||||
class TestComponent {
|
class TestComponent {
|
||||||
switchValue: any;
|
switchValue: any;
|
||||||
when1: any;
|
when1: any;
|
||||||
|
@ -13,7 +13,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
|
|||||||
import {window, document, gc} from 'angular2/src/facade/browser';
|
import {window, document, gc} from 'angular2/src/facade/browser';
|
||||||
import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
|
import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
|
||||||
|
|
||||||
import {For, Switch, SwitchWhen, SwitchDefault} from 'angular2/directives';
|
import {For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives';
|
||||||
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
|
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
|
||||||
|
|
||||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||||
@ -239,9 +239,9 @@ class AppComponent {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
directives: [For, Switch, SwitchWhen, SwitchDefault],
|
directives: [For, NgSwitch, NgSwitchWhen, NgSwitchDefault],
|
||||||
template: `
|
template: `
|
||||||
<table [switch]="benchmarkType">
|
<table [ng-switch]="benchmarkType">
|
||||||
<tbody template="switch-when 'interpolation'">
|
<tbody template="switch-when 'interpolation'">
|
||||||
<tr template="for #row of data">
|
<tr template="for #row of data">
|
||||||
<td template="for #column of row">
|
<td template="for #column of row">
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<div md-theme="default">
|
<div md-theme="default">
|
||||||
<h2>Switch demo</h2>
|
<h2>NgSwitch demo</h2>
|
||||||
|
|
||||||
<md-switch (^click)="increment()">Normal switch</md-switch>
|
<md-switch (^click)="increment()">Normal switch</md-switch>
|
||||||
<md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch>
|
<md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user