feat(Directive): convert properties to an array
fixes #2013 BREAKING CHANGE: Before @Directive(properties: { 'sameName': 'sameName', 'directiveProp': 'elProp | pipe' }) After @Directive(properties: [ 'sameName', 'directiveProp: elProp | pipe' ])
This commit is contained in:
parent
0387221da8
commit
d7df853bde
|
@ -63,9 +63,9 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
|
|||
```
|
||||
@Directive({
|
||||
selector: '[tooltip]', | CSS Selector which triggers the decorator
|
||||
properties: { | List which properties need to be bound
|
||||
text: 'tooltip' | - DOM element tooltip property should be
|
||||
}, | mapped to the directive text property.
|
||||
properties: [ | List which properties need to be bound
|
||||
'text: tooltip' | - DOM element tooltip property should be
|
||||
], | mapped to the directive text property.
|
||||
hostListeners: { | List which events need to be mapped.
|
||||
mouseover: 'show' | - Invoke the show() method every time
|
||||
} | the mouseover event is fired.
|
||||
|
@ -108,10 +108,10 @@ Example of a component:
|
|||
```
|
||||
@Component({ | Component annotation
|
||||
selector: 'pane', | CSS selector on <pane> element
|
||||
properties: { | List which property need to be bound
|
||||
'title': 'title', | - title mapped to component title
|
||||
'open': 'open' | - open attribute mapped to component's open property
|
||||
}, |
|
||||
properties: [ | List which property need to be bound
|
||||
'title', | - title mapped to component title
|
||||
'open' | - open attribute mapped to component's open property
|
||||
], |
|
||||
}) |
|
||||
@View({ | View annotation
|
||||
templateUrl: 'pane.html' | - URL of template HTML
|
||||
|
@ -173,9 +173,9 @@ Directives that use a ViewContainer can control instantiation of child views whi
|
|||
```
|
||||
@Directive({
|
||||
selector: '[if]',
|
||||
properties: {
|
||||
'condition': 'if'
|
||||
}
|
||||
properties: [
|
||||
'condition: if'
|
||||
]
|
||||
})
|
||||
export class If {
|
||||
viewContainer: ViewContainerRef;
|
||||
|
|
|
@ -103,9 +103,9 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
*
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
* }
|
||||
* properties: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
* class Dependency {
|
||||
* id:string;
|
||||
|
@ -275,9 +275,9 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[tooltip]',
|
||||
* properties: {
|
||||
* 'text': 'tooltip'
|
||||
* },
|
||||
* properties: [
|
||||
* 'text: tooltip'
|
||||
* ],
|
||||
* hostListeners: {
|
||||
* 'onmouseenter': 'onMouseEnter()',
|
||||
* 'onmouseleave': 'onMouseLeave()'
|
||||
|
@ -361,9 +361,7 @@ import {DEFAULT} from 'angular2/change_detection';
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[unless]',
|
||||
* properties: {
|
||||
* 'unless': 'unless'
|
||||
* }
|
||||
* properties: ['unless']
|
||||
* })
|
||||
* export class Unless {
|
||||
* viewContainer: ViewContainerRef;
|
||||
|
@ -453,25 +451,28 @@ export class Directive extends Injectable {
|
|||
* Enumerates the set of properties that accept data binding for a directive.
|
||||
*
|
||||
* The `properties` property defines a set of `directiveProperty` to `bindingProperty`
|
||||
* key-value pairs:
|
||||
* configuration:
|
||||
*
|
||||
* - `directiveProperty` specifies the component property where the value is written.
|
||||
* - `bindingProperty` specifies the DOM property where the value is read from.
|
||||
*
|
||||
* You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data
|
||||
* transformation and structural
|
||||
* change detection of the value. These pipes will be evaluated in the context of this component.
|
||||
*
|
||||
* transformation and structural change detection of the value. These pipes will be evaluated in
|
||||
* the context of this component.
|
||||
*
|
||||
* ## Syntax
|
||||
*
|
||||
* There is no need to specify both `directiveProperty` and `bindingProperty` when they both have
|
||||
* the same value.
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* properties: {
|
||||
* 'directiveProperty1': 'bindingProperty1',
|
||||
* 'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
|
||||
* properties: [
|
||||
* 'propertyName', // shorthand notation for 'propertyName: propertyName'
|
||||
* 'directiveProperty1: bindingProperty1',
|
||||
* 'directiveProperty2: bindingProperty2 | pipe1 | ...',
|
||||
* ...
|
||||
* }
|
||||
* ]
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
|
@ -479,26 +480,24 @@ export class Directive extends Injectable {
|
|||
* ## Basic Property Binding
|
||||
*
|
||||
* We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
|
||||
* be used in templates
|
||||
* with standard Angular syntax. For example:
|
||||
* be used in templates with standard Angular syntax. For example:
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[tooltip]',
|
||||
* properties: {
|
||||
* 'text': 'tooltip'
|
||||
* }
|
||||
* properties: [
|
||||
* 'text: tooltip'
|
||||
* ]
|
||||
* })
|
||||
* class Tooltip {
|
||||
* set text(text) {
|
||||
* // This will get called every time the 'tooltip' binding changes with the new value.
|
||||
* set text(value: string) {
|
||||
* // This will get called every time with the new value when the 'tooltip' property changes
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
|
||||
* string literal, as
|
||||
* shown in the HTML template below:
|
||||
* string literal, as shown in the HTML template below:
|
||||
*
|
||||
* ```html
|
||||
* <div [tooltip]="someExpression">...</div>
|
||||
|
@ -508,27 +507,24 @@ export class Directive extends Injectable {
|
|||
* Whenever the `someExpression` expression changes, the `properties` declaration instructs
|
||||
* Angular to update the `Tooltip`'s `text` property.
|
||||
*
|
||||
*
|
||||
*
|
||||
* ## Bindings With Pipes
|
||||
*
|
||||
* You can also use pipes when writing binding definitions for a directive.
|
||||
*
|
||||
* For example, we could write a binding that updates the directive on structural changes, rather
|
||||
* than on reference
|
||||
* changes, as normally occurs in change detection.
|
||||
* than on reference changes, as normally occurs in change detection.
|
||||
*
|
||||
* See {@link Pipe} and {@link keyValDiff} documentation for more details.
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: '[class-set]',
|
||||
* properties: {
|
||||
* 'classChanges': 'classSet | keyValDiff'
|
||||
* }
|
||||
* properties: [
|
||||
* 'classChanges: classSet | keyValDiff'
|
||||
* ]
|
||||
* })
|
||||
* class ClassSet {
|
||||
* set classChanges(changes:KeyValueChanges) {
|
||||
* set classChanges(changes: KeyValueChanges) {
|
||||
* // This will get called every time the `class-set` expressions changes its structure.
|
||||
* }
|
||||
* }
|
||||
|
@ -544,7 +540,7 @@ export class Directive extends Injectable {
|
|||
* keyValDiff`.
|
||||
*
|
||||
*/
|
||||
properties: StringMap<string, string>;
|
||||
properties: List<string>;
|
||||
|
||||
/**
|
||||
* Enumerates the set of emitted events.
|
||||
|
@ -756,7 +752,7 @@ export class Directive extends Injectable {
|
|||
hostActions, lifecycle, hostInjector, compileChildren = true,
|
||||
}: {
|
||||
selector?: string,
|
||||
properties?: any,
|
||||
properties?: List<string>,
|
||||
events?: List<string>,
|
||||
hostListeners?: StringMap<string, string>,
|
||||
hostProperties?: StringMap<string, string>,
|
||||
|
@ -981,7 +977,7 @@ export class Component extends Directive {
|
|||
hostActions, appInjector, lifecycle, hostInjector, viewInjector,
|
||||
changeDetection = DEFAULT, compileChildren = true}: {
|
||||
selector?: string,
|
||||
properties?: Object,
|
||||
properties?: List<string>,
|
||||
events?: List<string>,
|
||||
hostListeners?: Map<string, string>,
|
||||
hostProperties?: any,
|
||||
|
@ -1053,10 +1049,10 @@ export const onDestroy = CONST_EXPR(new LifecycleEvent("onDestroy"));
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[class-set]',
|
||||
* properties: {
|
||||
* 'propA': 'propA'
|
||||
* 'propB': 'propB'
|
||||
* },
|
||||
* properties: [
|
||||
* 'propA',
|
||||
* 'propB'
|
||||
* ],
|
||||
* lifecycle: [onChange]
|
||||
* })
|
||||
* class ClassSet {
|
||||
|
|
|
@ -21,9 +21,9 @@ export class Visibility extends DependencyAnnotation {
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
* }
|
||||
* properties: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
* class Dependency {
|
||||
* id:string;
|
||||
|
@ -66,9 +66,9 @@ export var self = new Self();
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
* }
|
||||
* properties: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
* class Dependency {
|
||||
* id:string;
|
||||
|
@ -118,9 +118,9 @@ export class Parent extends Visibility {
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
* }
|
||||
* properties: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
* class Dependency {
|
||||
* id:string;
|
||||
|
@ -178,9 +178,9 @@ export class Ancestor extends Visibility {
|
|||
* ```
|
||||
* @Directive({
|
||||
* selector: '[dependency]',
|
||||
* properties: {
|
||||
* 'id':'dependency'
|
||||
* }
|
||||
* properties: [
|
||||
* 'id: dependency'
|
||||
* ]
|
||||
* })
|
||||
* class Dependency {
|
||||
* id:string;
|
||||
|
|
|
@ -300,7 +300,7 @@ export class DirectiveBinding extends ResolvedBinding {
|
|||
isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
|
||||
hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) :
|
||||
null,
|
||||
properties: isPresent(ann.properties) ? MapWrapper.createFromStringMap(ann.properties) : null,
|
||||
properties: ann.properties,
|
||||
readAttributes: DirectiveBinding._readAttributes(deps),
|
||||
|
||||
callOnDestroy: hasLifecycleHook(onDestroy, rb.key.token, ann),
|
||||
|
|
|
@ -4,7 +4,7 @@ import {ElementRef} from 'angular2/core';
|
|||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
|
||||
@Directive({selector: '[class]', properties: {'iterableChanges': 'class | keyValDiff'}})
|
||||
@Directive({selector: '[class]', properties: ['iterableChanges: class | keyValDiff']})
|
||||
export class CSSClass {
|
||||
_domEl;
|
||||
constructor(ngEl: ElementRef) { this._domEl = ngEl.domElement; }
|
||||
|
|
|
@ -36,7 +36,7 @@ import {ListWrapper} from 'angular2/src/facade/collection';
|
|||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Directive(
|
||||
{selector: '[ng-for][ng-for-of]', properties: {'iterableChanges': 'ngForOf | iterableDiff'}})
|
||||
{selector: '[ng-for][ng-for-of]', properties: ['iterableChanges: ngForOf | iterableDiff']})
|
||||
export class NgFor {
|
||||
viewContainer: ViewContainerRef;
|
||||
protoViewRef: ProtoViewRef;
|
||||
|
|
|
@ -27,7 +27,7 @@ import {isBlank} from 'angular2/src/facade/lang';
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Directive({selector: '[ng-if]', properties: {'ngIf': 'ngIf'}})
|
||||
@Directive({selector: '[ng-if]', properties: ['ngIf']})
|
||||
export class NgIf {
|
||||
viewContainer: ViewContainerRef;
|
||||
protoViewRef: ProtoViewRef;
|
||||
|
|
|
@ -44,7 +44,7 @@ export class SwitchView {
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Directive({selector: '[ng-switch]', properties: {'ngSwitch': 'ngSwitch'}})
|
||||
@Directive({selector: '[ng-switch]', properties: ['ngSwitch']})
|
||||
export class NgSwitch {
|
||||
_switchValue: any;
|
||||
_useDefault: boolean;
|
||||
|
@ -153,7 +153,7 @@ export class NgSwitch {
|
|||
*
|
||||
* @exportedAs angular2/directives
|
||||
*/
|
||||
@Directive({selector: '[ng-switch-when]', properties: {'ngSwitchWhen': 'ngSwitchWhen'}})
|
||||
@Directive({selector: '[ng-switch-when]', properties: ['ngSwitchWhen']})
|
||||
export class NgSwitchWhen {
|
||||
_value: any;
|
||||
_switch: NgSwitch;
|
||||
|
|
|
@ -73,7 +73,7 @@ function _lookupControl(groupDirective: ControlGroupDirective, controlOrName: an
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Directive({selector: '[control-group]', properties: {'controlOrName': 'control-group'}})
|
||||
@Directive({selector: '[control-group]', properties: ['controlOrName: control-group']})
|
||||
export class ControlGroupDirective {
|
||||
_groupDirective: ControlGroupDirective;
|
||||
_directives: List<ControlDirective>;
|
||||
|
@ -133,7 +133,7 @@ export class ControlGroupDirective {
|
|||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
@Directive({selector: '[control]', properties: {'controlOrName': 'control'}})
|
||||
@Directive({selector: '[control]', properties: ['controlOrName: control']})
|
||||
export class ControlDirective {
|
||||
_groupDirective: ControlGroupDirective;
|
||||
|
||||
|
|
|
@ -133,7 +133,7 @@ export class DirectiveMetadata {
|
|||
hostProperties: Map<string, string>;
|
||||
hostAttributes: Map<string, string>;
|
||||
hostActions: Map<string, string>;
|
||||
properties: Map<string, string>;
|
||||
properties: List<string>;
|
||||
readAttributes: List<string>;
|
||||
type: number;
|
||||
callOnDestroy: boolean;
|
||||
|
@ -153,7 +153,7 @@ export class DirectiveMetadata {
|
|||
hostProperties?: Map<string, string>,
|
||||
hostAttributes?: Map<string, string>,
|
||||
hostActions?: Map<string, string>,
|
||||
properties?: Map<string, string>,
|
||||
properties?: List<string>,
|
||||
readAttributes?: List<string>,
|
||||
type?: number,
|
||||
callOnDestroy?: boolean,
|
||||
|
|
|
@ -89,8 +89,8 @@ import {
|
|||
var directiveBinderBuilder = elementBinder.bindDirective(directiveIndex);
|
||||
current.compileChildren = current.compileChildren && directive.compileChildren;
|
||||
if (isPresent(directive.properties)) {
|
||||
MapWrapper.forEach(directive.properties, (bindConfig, dirProperty) => {
|
||||
this._bindDirectiveProperty(dirProperty, bindConfig, current, directiveBinderBuilder);
|
||||
ListWrapper.forEach(directive.properties, (bindConfig) => {
|
||||
this._bindDirectiveProperty(bindConfig, current, directiveBinderBuilder);
|
||||
});
|
||||
}
|
||||
if (isPresent(directive.hostListeners)) {
|
||||
|
@ -121,10 +121,27 @@ import {
|
|||
});
|
||||
}
|
||||
|
||||
_bindDirectiveProperty(dirProperty: string, bindConfig: string, compileElement: CompileElement,
|
||||
_bindDirectiveProperty(bindConfig: string, compileElement: CompileElement,
|
||||
directiveBinderBuilder: DirectiveBuilder) {
|
||||
var pipes = this._splitBindConfig(bindConfig);
|
||||
var elProp = ListWrapper.removeAt(pipes, 0);
|
||||
// Name of the property on the directive
|
||||
let dirProperty: string;
|
||||
// Name of the property on the element
|
||||
let elProp: string;
|
||||
let pipes: List<string>;
|
||||
let assignIndex: number = bindConfig.indexOf(':');
|
||||
|
||||
if (assignIndex > -1) {
|
||||
// canonical syntax: `dirProp: elProp | pipe0 | ... | pipeN`
|
||||
dirProperty = StringWrapper.substring(bindConfig, 0, assignIndex).trim();
|
||||
pipes = this._splitBindConfig(StringWrapper.substring(bindConfig, assignIndex + 1));
|
||||
elProp = ListWrapper.removeAt(pipes, 0);
|
||||
} else {
|
||||
// shorthand syntax when the name of the property on the directive and on the element is the
|
||||
// same, ie `property`
|
||||
dirProperty = bindConfig;
|
||||
elProp = bindConfig;
|
||||
pipes = [];
|
||||
}
|
||||
|
||||
var bindingAst =
|
||||
MapWrapper.get(compileElement.bindElement().propertyBindings, dashCaseToCamelCase(elProp));
|
||||
|
|
|
@ -36,7 +36,7 @@ export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetada
|
|||
hostProperties:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostProperties')),
|
||||
hostActions:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostActions')),
|
||||
hostAttributes:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostAttributes')),
|
||||
properties:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
|
||||
properties:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
|
||||
readAttributes:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'readAttributes')),
|
||||
type:<number>MapWrapper.get(map, 'type')
|
||||
});
|
||||
|
|
|
@ -31,10 +31,10 @@ import {Location} from './location';
|
|||
*/
|
||||
@Directive({
|
||||
selector: '[router-link]',
|
||||
properties: {
|
||||
'route': 'routerLink',
|
||||
'params': 'routerParams'
|
||||
},
|
||||
properties: [
|
||||
'route: routerLink',
|
||||
'params: routerParams'
|
||||
],
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
export class RouterLink {
|
||||
|
|
|
@ -56,7 +56,7 @@ class _DirectiveMetadataVisitor extends Object
|
|||
meta = new DirectiveMetadata(
|
||||
type: type,
|
||||
compileChildren: true,
|
||||
properties: {},
|
||||
properties: [],
|
||||
hostListeners: {},
|
||||
hostProperties: {},
|
||||
hostAttributes: {},
|
||||
|
|
|
@ -219,7 +219,7 @@ export function main() {
|
|||
it('should set directive.bind', inject([AsyncTestCompleter], (async) => {
|
||||
captureDirective(DirectiveWithBind)
|
||||
.then((renderDir) => {
|
||||
expect(renderDir.properties).toEqual(MapWrapper.createFromStringMap({'a': 'b'}));
|
||||
expect(renderDir.properties).toEqual(['a: b']);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
@ -478,7 +478,7 @@ class DirectiveWithEvents {
|
|||
class DirectiveWithProperties {
|
||||
}
|
||||
|
||||
@Directive({properties: {'a': 'b'}})
|
||||
@Directive({properties: ['a: b']})
|
||||
class DirectiveWithBind {
|
||||
}
|
||||
|
||||
|
|
|
@ -191,7 +191,7 @@ class NoPropertyAccess {
|
|||
selector: 'on-change',
|
||||
// TODO: needed because of https://github.com/angular/angular/issues/2120
|
||||
lifecycle: const [onChange],
|
||||
properties: const { 'prop': 'prop' }
|
||||
properties: const ['prop']
|
||||
)
|
||||
@View(template: '')
|
||||
class OnChangeComponent implements OnChange {
|
||||
|
|
|
@ -1173,14 +1173,14 @@ class DynamicViewport {
|
|||
}
|
||||
}
|
||||
|
||||
@Directive({selector: '[my-dir]', properties: {'dirProp': 'elprop'}})
|
||||
@Directive({selector: '[my-dir]', properties: ['dirProp: elprop']})
|
||||
@Injectable()
|
||||
class MyDir {
|
||||
dirProp: string;
|
||||
constructor() { this.dirProp = ''; }
|
||||
}
|
||||
|
||||
@Component({selector: 'push-cmp', properties: {'prop': 'prop'}, changeDetection: ON_PUSH})
|
||||
@Component({selector: 'push-cmp', properties: ['prop'], changeDetection: ON_PUSH})
|
||||
@View({template: '{{field}}'})
|
||||
@Injectable()
|
||||
class PushCmp {
|
||||
|
@ -1195,7 +1195,7 @@ class PushCmp {
|
|||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'push-cmp-with-ref', properties: {'prop': 'prop'}, changeDetection: ON_PUSH})
|
||||
@Component({selector: 'push-cmp-with-ref', properties: ['prop'], changeDetection: ON_PUSH})
|
||||
@View({template: '{{field}}'})
|
||||
@Injectable()
|
||||
class PushCmpWithRef {
|
||||
|
@ -1230,7 +1230,7 @@ class MyComp {
|
|||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'component-with-pipes', properties: {"prop": "prop | double"}})
|
||||
@Component({selector: 'component-with-pipes', properties: ["prop: prop | double"]})
|
||||
@View({template: ''})
|
||||
@Injectable()
|
||||
class ComponentWithPipes {
|
||||
|
@ -1412,7 +1412,7 @@ class DirectiveListeningDomEventNoPrevent {
|
|||
onEvent(event) { return true; }
|
||||
}
|
||||
|
||||
@Directive({selector: '[id]', properties: {'id': 'id'}})
|
||||
@Directive({selector: '[id]', properties: ['id']})
|
||||
@Injectable()
|
||||
class IdDir {
|
||||
id: string;
|
||||
|
@ -1459,7 +1459,7 @@ class ToolbarPart {
|
|||
}
|
||||
}
|
||||
|
||||
@Directive({selector: '[toolbar-vc]', properties: {'toolbarVc': 'toolbarVc'}})
|
||||
@Directive({selector: '[toolbar-vc]', properties: ['toolbarVc']})
|
||||
@Injectable()
|
||||
class ToolbarViewContainer {
|
||||
vc: ViewContainerRef;
|
||||
|
@ -1487,7 +1487,7 @@ class ToolbarComponent {
|
|||
}
|
||||
}
|
||||
|
||||
@Directive({selector: '[two-way]', properties: {value: 'control'}, events: ['control']})
|
||||
@Directive({selector: '[two-way]', properties: ['value: control'], events: ['control']})
|
||||
@Injectable()
|
||||
class DirectiveWithTwoWayBinding {
|
||||
control: EventEmitter;
|
||||
|
|
|
@ -87,7 +87,7 @@ export function main() {
|
|||
});
|
||||
}
|
||||
|
||||
@Directive({selector: '[text]', properties: {'text': 'text'}})
|
||||
@Directive({selector: '[text]', properties: ['text']})
|
||||
@Injectable()
|
||||
class TextDirective {
|
||||
text: string;
|
||||
|
|
|
@ -48,11 +48,8 @@ export function main() {
|
|||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: "[lifecycle]",
|
||||
properties: {'field': 'field'},
|
||||
lifecycle: [onChange, onCheck, onInit]
|
||||
})
|
||||
@Directive(
|
||||
{selector: "[lifecycle]", properties: ['field'], lifecycle: [onChange, onCheck, onInit]})
|
||||
class LifecycleDir {
|
||||
field;
|
||||
log: List<string>;
|
||||
|
@ -69,4 +66,4 @@ class LifecycleDir {
|
|||
@Component({selector: 'my-comp'})
|
||||
@View({directives: []})
|
||||
class MyComp {
|
||||
}
|
||||
}
|
||||
|
|
|
@ -239,8 +239,7 @@ var decoratorWithMultipleAttrs = new DirectiveMetadata({
|
|||
|
||||
var someDirectiveWithProps = new DirectiveMetadata({
|
||||
selector: '[some-decor-props]',
|
||||
properties:
|
||||
MapWrapper.createFromStringMap({'dirProp': 'elProp', 'doubleProp': 'elProp | double'}),
|
||||
properties: ['dirProp: elProp', 'doubleProp: elProp | double'],
|
||||
readAttributes: ['some-attr']
|
||||
});
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ export function main() {
|
|||
hostProperties: MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']]),
|
||||
hostActions: MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]),
|
||||
id: 'someComponent',
|
||||
properties: MapWrapper.createFromPairs([['propKey', 'propVal']]),
|
||||
properties: ['propKey: propVal'],
|
||||
readAttributes: ['read1', 'read2'],
|
||||
selector: 'some-comp',
|
||||
type: DirectiveMetadata.COMPONENT_TYPE
|
||||
|
@ -26,8 +26,7 @@ export function main() {
|
|||
expect(MapWrapper.get(map, 'hostActions'))
|
||||
.toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]));
|
||||
expect(MapWrapper.get(map, 'id')).toEqual('someComponent');
|
||||
expect(MapWrapper.get(map, 'properties'))
|
||||
.toEqual(MapWrapper.createFromPairs([['propKey', 'propVal']]));
|
||||
expect(MapWrapper.get(map, 'properties')).toEqual(['propKey: propVal']);
|
||||
expect(MapWrapper.get(map, 'readAttributes')).toEqual(['read1', 'read2']);
|
||||
expect(MapWrapper.get(map, 'selector')).toEqual('some-comp');
|
||||
expect(MapWrapper.get(map, 'type')).toEqual(DirectiveMetadata.COMPONENT_TYPE);
|
||||
|
@ -40,7 +39,7 @@ export function main() {
|
|||
['hostProperties', MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']])],
|
||||
['hostActions', MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']])],
|
||||
['id', 'testId'],
|
||||
['properties', MapWrapper.createFromPairs([['propKey', 'propVal']])],
|
||||
['properties', ['propKey: propVal']],
|
||||
['readAttributes', ['readTest1', 'readTest2']],
|
||||
['selector', 'testSelector'],
|
||||
['type', DirectiveMetadata.DIRECTIVE_TYPE]
|
||||
|
@ -53,7 +52,7 @@ export function main() {
|
|||
expect(meta.hostActions)
|
||||
.toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]));
|
||||
expect(meta.id).toEqual('testId');
|
||||
expect(meta.properties).toEqual(MapWrapper.createFromPairs([['propKey', 'propVal']]));
|
||||
expect(meta.properties).toEqual(['propKey: propVal']);
|
||||
expect(meta.readAttributes).toEqual(['readTest1', 'readTest2']);
|
||||
expect(meta.selector).toEqual('testSelector');
|
||||
expect(meta.type).toEqual(DirectiveMetadata.DIRECTIVE_TYPE);
|
||||
|
|
|
@ -43,7 +43,7 @@ class Logger {
|
|||
add(thing: string) { ListWrapper.push(this.log, thing); }
|
||||
}
|
||||
|
||||
@Directive({selector: '[message]', properties: {'message': 'message'}})
|
||||
@Directive({selector: '[message]', properties: ['message']})
|
||||
@Injectable()
|
||||
class MessageDir {
|
||||
logger: Logger;
|
||||
|
|
|
@ -13,7 +13,7 @@ void initReflector(reflector) {
|
|||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Directive(
|
||||
selector: '[tool-tip]', properties: const {'text': 'tool-tip'})
|
||||
selector: '[tool-tip]', properties: const ['text: tool-tip'])
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ void initReflector(reflector) {
|
|||
'parameters': const [],
|
||||
'annotations': const [
|
||||
const Directive(
|
||||
selector: '[tool-tip]', properties: const {'text': 'tool-tip'})
|
||||
selector: '[tool-tip]', properties: const ['text: tool-tip'])
|
||||
]
|
||||
})
|
||||
..registerSetters({'text': (o, v) => o.text = v});
|
||||
|
|
|
@ -14,13 +14,13 @@ void initReflector(reflector) {
|
|||
'annotations': const [
|
||||
const Component(
|
||||
componentServices: const [SaladComponent],
|
||||
properties: const {'menu': 'menu'})
|
||||
properties: const ['menu'])
|
||||
]
|
||||
})
|
||||
..registerType(SaladComponent, {
|
||||
'factory': () => new SaladComponent(),
|
||||
'parameters': const [],
|
||||
'annotations': const [const Component(properties: const {'menu': 'menu'})]
|
||||
'annotations': const [const Component(properties: const ['menu'])]
|
||||
})
|
||||
..registerSetters({'menu': (o, v) => o.menu = v});
|
||||
}
|
||||
|
|
|
@ -14,12 +14,12 @@ void initReflector(reflector) {
|
|||
'annotations': const [
|
||||
const Component(
|
||||
componentServices: const [SaladComponent],
|
||||
properties: const {'menu': 'menu'})
|
||||
properties: const ['menu'])
|
||||
]
|
||||
})
|
||||
..registerType(SaladComponent, {
|
||||
'factory': () => new SaladComponent(),
|
||||
'parameters': const [],
|
||||
'annotations': const [const Component(properties: const {'menu': 'menu'})]
|
||||
'annotations': const [const Component(properties: const ['menu'])]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ void initReflector(reflector) {
|
|||
'factory': () => new HelloCmp(),
|
||||
'parameters': const [const []],
|
||||
'annotations': const [
|
||||
const Component(properties: const {'key1': 'val1', 'key2': 'val2'})
|
||||
const Component(properties: const ['key1: val1', 'key2: val2'])
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ export class MdButton {
|
|||
|
||||
@Component({
|
||||
selector: '[md-button][href]',
|
||||
properties: {'disabled': 'disabled'},
|
||||
properties: ['disabled'],
|
||||
hostListeners: {'click': 'onClick($event)'},
|
||||
hostProperties: {'tabIndex': 'tabIndex'},
|
||||
lifecycle: [onChange]
|
||||
|
|
|
@ -6,7 +6,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
|
|||
|
||||
@Component({
|
||||
selector: 'md-checkbox',
|
||||
properties: {'checked': 'checked', 'disabled': 'disabled'},
|
||||
properties: ['checked', 'disabled'],
|
||||
hostListeners: {'keydown': 'onKeydown($event)'},
|
||||
hostProperties: {
|
||||
'tabindex': 'tabindex',
|
||||
|
|
|
@ -19,7 +19,7 @@ import {Math} from 'angular2/src/facade/math';
|
|||
|
||||
@Component({
|
||||
selector: 'md-grid-list',
|
||||
properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'},
|
||||
properties: ['cols', 'rowHeight', 'gutterSize'],
|
||||
lifecycle: [onAllChangesDone]
|
||||
})
|
||||
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
|
||||
|
@ -217,7 +217,7 @@ export class MdGridList {
|
|||
|
||||
@Component({
|
||||
selector: 'md-grid-tile',
|
||||
properties: {'rowspan': 'rowspan', 'colspan': 'colspan'},
|
||||
properties: ['rowspan', 'colspan'],
|
||||
hostProperties: {
|
||||
'styleHeight': 'style.height',
|
||||
'styleWidth': 'style.width',
|
||||
|
|
|
@ -6,7 +6,7 @@ import {Math} from 'angular2/src/facade/math';
|
|||
@Component({
|
||||
selector: 'md-progress-linear',
|
||||
lifecycle: [onChange],
|
||||
properties: {'value': 'value', 'bufferValue': 'buffer-value'},
|
||||
properties: ['value', 'bufferValue'],
|
||||
hostProperties: {
|
||||
'role': 'attr.role',
|
||||
'ariaValuemin': 'attr.aria-valuemin',
|
||||
|
|
|
@ -26,7 +26,7 @@ var _uniqueIdCounter: number = 0;
|
|||
selector: 'md-radio-group',
|
||||
lifecycle: [onChange],
|
||||
events: ['change'],
|
||||
properties: {'disabled': 'disabled', 'value': 'value'},
|
||||
properties: ['disabled', 'value'],
|
||||
hostListeners: {
|
||||
// TODO(jelbourn): Remove ^ when event retargeting is fixed.
|
||||
'^keydown': 'onKeydown($event)'
|
||||
|
@ -186,8 +186,7 @@ export class MdRadioGroup {
|
|||
@Component({
|
||||
selector: 'md-radio-button',
|
||||
lifecycle: [onChange],
|
||||
properties:
|
||||
{'id': 'id', 'name': 'name', 'value': 'value', 'checked': 'checked', 'disabled': 'disabled'},
|
||||
properties: ['id', 'name', 'value', 'checked', 'disabled'],
|
||||
hostListeners: {'keydown': 'onKeydown($event)'},
|
||||
hostProperties: {
|
||||
'id': 'id',
|
||||
|
|
|
@ -8,7 +8,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
|
|||
|
||||
@Component({
|
||||
selector: 'md-switch',
|
||||
properties: {'checked': 'checked', 'disabled': 'disabled'},
|
||||
properties: ['checked', 'disabled'],
|
||||
hostListeners: {'keydown': 'onKeydown($event)'},
|
||||
hostProperties:
|
||||
{'checked': 'attr.aria-checked', 'disabled_': 'attr.aria-disabled', 'role': 'attr.role'}
|
||||
|
|
|
@ -81,17 +81,17 @@ export function main() {
|
|||
|
||||
@Directive({
|
||||
selector: '[dir0]',
|
||||
properties: {
|
||||
'prop': 'attr0'
|
||||
}
|
||||
properties: [
|
||||
'prop: attr0'
|
||||
]
|
||||
})
|
||||
class Dir0 {}
|
||||
|
||||
@Directive({
|
||||
selector: '[dir1]',
|
||||
properties: {
|
||||
'prop': 'attr1'
|
||||
}
|
||||
properties: [
|
||||
'prop: attr1'
|
||||
]
|
||||
})
|
||||
class Dir1 {
|
||||
constructor(dir0:Dir0) {}
|
||||
|
@ -99,9 +99,9 @@ class Dir1 {
|
|||
|
||||
@Directive({
|
||||
selector: '[dir2]',
|
||||
properties: {
|
||||
'prop': 'attr2'
|
||||
}
|
||||
properties: [
|
||||
'prop: attr2'
|
||||
]
|
||||
})
|
||||
class Dir2 {
|
||||
constructor(dir1:Dir1) {}
|
||||
|
@ -109,9 +109,9 @@ class Dir2 {
|
|||
|
||||
@Directive({
|
||||
selector: '[dir3]',
|
||||
properties: {
|
||||
'prop': 'attr3'
|
||||
}
|
||||
properties: [
|
||||
'prop: attr3'
|
||||
]
|
||||
})
|
||||
class Dir3 {
|
||||
constructor(dir2:Dir2) {}
|
||||
|
@ -119,9 +119,9 @@ class Dir3 {
|
|||
|
||||
@Directive({
|
||||
selector: '[dir4]',
|
||||
properties: {
|
||||
'prop': 'attr4'
|
||||
}
|
||||
properties: [
|
||||
'prop: attr4'
|
||||
]
|
||||
})
|
||||
class Dir4 {
|
||||
constructor(dir3:Dir3) {}
|
||||
|
|
|
@ -233,10 +233,10 @@ class AppComponent {
|
|||
|
||||
@Component({
|
||||
selector: 'largetable',
|
||||
properties: {
|
||||
'data': 'data',
|
||||
'benchmarkType': 'benchmarktype'
|
||||
}
|
||||
properties: [
|
||||
'data',
|
||||
'benchmarkType'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
|
||||
|
|
|
@ -22,10 +22,10 @@ export class HasStyle {
|
|||
|
||||
@Component({
|
||||
selector: 'company-name',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'company': 'company'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'company'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [],
|
||||
|
@ -37,10 +37,10 @@ export class CompanyNameComponent extends HasStyle {
|
|||
|
||||
@Component({
|
||||
selector: 'opportunity-name',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'opportunity': 'opportunity'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'opportunity'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [],
|
||||
|
@ -52,10 +52,10 @@ export class OpportunityNameComponent extends HasStyle {
|
|||
|
||||
@Component({
|
||||
selector: 'offering-name',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'offering': 'offering'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'offering'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [],
|
||||
|
@ -74,10 +74,10 @@ export class Stage {
|
|||
|
||||
@Component({
|
||||
selector: 'stage-buttons',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'offering': 'offering'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'offering'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [NgFor],
|
||||
|
@ -133,10 +133,10 @@ export class StageButtonsComponent extends HasStyle {
|
|||
|
||||
@Component({
|
||||
selector: 'account-cell',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'account': 'account'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'account'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [],
|
||||
|
@ -153,10 +153,10 @@ export class AccountCellComponent extends HasStyle {
|
|||
|
||||
@Component({
|
||||
selector: 'formatted-cell',
|
||||
properties: {
|
||||
'width': 'cell-width',
|
||||
'value': 'value'
|
||||
}
|
||||
properties: [
|
||||
'width: cell-width',
|
||||
'value'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [],
|
||||
|
|
|
@ -15,9 +15,9 @@ import {Offering, ITEM_HEIGHT, COMPANY_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH,
|
|||
|
||||
@Component({
|
||||
selector: 'scroll-item',
|
||||
properties: {
|
||||
'offering': 'offering'
|
||||
}
|
||||
properties: [
|
||||
'offering'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
directives: [
|
||||
|
|
|
@ -242,7 +242,7 @@ class AppComponent {
|
|||
|
||||
@Component({
|
||||
selector: 'tree',
|
||||
properties: {'data': 'data'}
|
||||
properties: ['data']
|
||||
})
|
||||
@View({
|
||||
directives: [TreeComponent, NgIf],
|
||||
|
|
|
@ -16,7 +16,7 @@ import {print} from 'angular2/src/facade/lang';
|
|||
// <survey-header [header]="header"></survey-header>
|
||||
//
|
||||
// This component is self-contained and can be tested in isolation.
|
||||
@Component({selector: 'survey-header', properties: {"header": "header"}})
|
||||
@Component({selector: 'survey-header', properties: ['header']})
|
||||
@View({
|
||||
template: `
|
||||
<div [control-group]="header">
|
||||
|
@ -62,11 +62,7 @@ class HeaderFields {
|
|||
//
|
||||
// SurveyQuestion uses EventEmitter to fire the delete action.
|
||||
// This component is self-contained and can be tested in isolation.
|
||||
@Component({
|
||||
selector: 'survey-question',
|
||||
events: ['destroy'],
|
||||
properties: {"question": "question", "index": "index"}
|
||||
})
|
||||
@Component({selector: 'survey-question', events: ['destroy'], properties: ['question', 'index']})
|
||||
@View({
|
||||
template: `
|
||||
<h2>Question #{{index}}</h2>
|
||||
|
|
|
@ -62,7 +62,7 @@ class DemoApp {
|
|||
|
||||
@Component({
|
||||
selector: 'simple-dialog',
|
||||
properties: {'numCoconuts': 'numCoconuts'}
|
||||
properties: ['numCoconuts']
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
|
|
Loading…
Reference in New Issue