Skip to content

Commit f3b4937

Browse files
vicbtbosch
vicb
authored and
tbosch
committed
feat(Directive): Have a single Directive.host which mimics HTML
fixes #2268 BREAKING CHANGE: Before @directive({ hostListeners: {'event': 'statement'}, hostProperties: {'expression': 'hostProp'}, hostAttributes: {'attr': 'value'}, hostActions: {'action': 'statement'} }) After @directive({ host: { '(event)': 'statement', '[hostProp]': 'expression' // k & v swapped 'attr': 'value', '@action': 'statement' } })
1 parent 47b6b05 commit f3b4937

32 files changed

Lines changed: 316 additions & 242 deletions

‎modules/angular2/src/core/annotations_impl/annotations.ts‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -585,6 +585,8 @@ export class Directive extends Injectable {
585585
*/
586586
events: List<string>;
587587

588+
// TODO(vicb): doc
589+
588590
/**
589591
* Specifies which DOM hostListeners a directive listens to.
590592
*
@@ -643,9 +645,6 @@ export class Directive extends Injectable {
643645
* 'change' event.
644646
*
645647
*/
646-
hostListeners: StringMap<string, string>;
647-
648-
649648
/**
650649
* Specifies which DOM properties a directives updates.
651650
*
@@ -667,8 +666,6 @@ export class Directive extends Injectable {
667666
* the host element.
668667
* ```
669668
*/
670-
hostProperties: StringMap<string, string>;
671-
672669
/**
673670
* Specifies static attributes that should be propagated to a host element. Attributes specified
674671
* in `hostAttributes`
@@ -691,8 +688,6 @@ export class Directive extends Injectable {
691688
* will ensure that this element will get the "button" role.
692689
* ```
693690
*/
694-
hostAttributes: StringMap<string, string>;
695-
696691
/**
697692
* Specifies which DOM methods a directive can invoke.
698693
*
@@ -719,7 +714,8 @@ export class Directive extends Injectable {
719714
* element.
720715
* ```
721716
*/
722-
hostActions: StringMap<string, string>;
717+
718+
host: StringMap<string, string>;
723719

724720
/**
725721
* Specifies which lifecycle should be notified to the directive.
@@ -795,16 +791,13 @@ export class Directive extends Injectable {
795791
exportAs: string;
796792

797793
constructor({
798-
selector, properties, events, hostListeners, hostProperties, hostAttributes,
799-
hostActions, lifecycle, hostInjector, exportAs, compileChildren = true,
794+
selector, properties, events, host, lifecycle, hostInjector, exportAs,
795+
compileChildren = true,
800796
}: {
801797
selector?: string,
802798
properties?: List<string>,
803799
events?: List<string>,
804-
hostListeners?: StringMap<string, string>,
805-
hostProperties?: StringMap<string, string>,
806-
hostAttributes?: StringMap<string, string>,
807-
hostActions?: StringMap<string, string>,
800+
host?: StringMap<string, string>,
808801
lifecycle?: List<LifecycleEvent>,
809802
hostInjector?: List<any>,
810803
exportAs?: string,
@@ -814,10 +807,7 @@ export class Directive extends Injectable {
814807
this.selector = selector;
815808
this.properties = properties;
816809
this.events = events;
817-
this.hostListeners = hostListeners;
818-
this.hostProperties = hostProperties;
819-
this.hostAttributes = hostAttributes;
820-
this.hostActions = hostActions;
810+
this.host = host;
821811
this.exportAs = exportAs;
822812
this.lifecycle = lifecycle;
823813
this.compileChildren = compileChildren;
@@ -1022,16 +1012,12 @@ export class Component extends Directive {
10221012
*/
10231013
viewInjector: List<any>;
10241014

1025-
constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
1026-
hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector,
1027-
changeDetection = DEFAULT, compileChildren = true}: {
1015+
constructor({selector, properties, events, host, exportAs, appInjector, lifecycle, hostInjector,
1016+
viewInjector, changeDetection = DEFAULT, compileChildren = true}: {
10281017
selector?: string,
10291018
properties?: List<string>,
10301019
events?: List<string>,
1031-
hostListeners?: StringMap<string, string>,
1032-
hostProperties?: StringMap<string, string>,
1033-
hostAttributes?: StringMap<string, string>,
1034-
hostActions?: StringMap<string, string>,
1020+
host?: StringMap<string, string>,
10351021
exportAs?: string,
10361022
appInjector?: List<any>,
10371023
lifecycle?: List<LifecycleEvent>,
@@ -1044,10 +1030,7 @@ export class Component extends Directive {
10441030
selector: selector,
10451031
properties: properties,
10461032
events: events,
1047-
hostListeners: hostListeners,
1048-
hostProperties: hostProperties,
1049-
hostAttributes: hostAttributes,
1050-
hostActions: hostActions,
1033+
host: host,
10511034
exportAs: exportAs,
10521035
hostInjector: hostInjector,
10531036
lifecycle: lifecycle,

‎modules/angular2/src/core/compiler/element_injector.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -293,21 +293,14 @@ export class DirectiveBinding extends ResolvedBinding {
293293
var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ?
294294
resolveBindings(ann.viewInjector) :
295295
[];
296-
var metadata = new DirectiveMetadata({
296+
var metadata = DirectiveMetadata.create({
297297
id: stringify(rb.key.token),
298298
type: ann instanceof
299299
Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
300300
selector: ann.selector,
301301
compileChildren: ann.compileChildren,
302302
events: ann.events,
303-
hostListeners:
304-
isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
305-
hostProperties:
306-
isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
307-
hostAttributes:
308-
isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
309-
hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) :
310-
null,
303+
host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null,
311304
properties: ann.properties,
312305
readAttributes: DirectiveBinding._readAttributes(deps),
313306

‎modules/angular2/src/forms/directives/checkbox_value_accessor.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,16 @@ import {ControlValueAccessor} from './control_value_accessor';
1616
@Directive({
1717
selector:
1818
'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
19-
hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
20-
hostProperties: {
21-
'checked': 'checked',
22-
'cd.control?.untouched == true': 'class.ng-untouched',
23-
'cd.control?.touched == true': 'class.ng-touched',
24-
'cd.control?.pristine == true': 'class.ng-pristine',
25-
'cd.control?.dirty == true': 'class.ng-dirty',
26-
'cd.control?.valid == true': 'class.ng-valid',
27-
'cd.control?.valid == false': 'class.ng-invalid'
19+
host: {
20+
'(change)': 'onChange($event.target.checked)',
21+
'(blur)': 'onTouched()',
22+
'[checked]': 'checked',
23+
'[class.ng-untouched]': 'cd.control?.untouched == true',
24+
'[class.ng-touched]': 'cd.control?.touched == true',
25+
'[class.ng-pristine]': 'cd.control?.pristine == true',
26+
'[class.ng-dirty]': 'cd.control?.dirty == true',
27+
'[class.ng-valid]': 'cd.control?.valid == true',
28+
'[class.ng-invalid]': 'cd.control?.valid == false'
2829
}
2930
})
3031
export class CheckboxControlValueAccessor implements ControlValueAccessor {
@@ -42,4 +43,4 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
4243

4344
registerOnChange(fn): void { this.onChange = fn; }
4445
registerOnTouched(fn): void { this.onTouched = fn; }
45-
}
46+
}

‎modules/angular2/src/forms/directives/default_value_accessor.ts‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,17 @@ import {isBlank} from 'angular2/src/facade/lang';
1919
@Directive({
2020
selector:
2121
'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
22-
hostListeners: {
23-
'change': 'onChange($event.target.value)',
24-
'input': 'onChange($event.target.value)',
25-
'blur': 'onTouched()'
26-
},
27-
hostProperties: {
28-
'value': 'value',
29-
'cd.control?.untouched == true': 'class.ng-untouched',
30-
'cd.control?.touched == true': 'class.ng-touched',
31-
'cd.control?.pristine == true': 'class.ng-pristine',
32-
'cd.control?.dirty == true': 'class.ng-dirty',
33-
'cd.control?.valid == true': 'class.ng-valid',
34-
'cd.control?.valid == false': 'class.ng-invalid'
22+
host: {
23+
'(change)': 'onChange($event.target.value)',
24+
'(input)': 'onChange($event.target.value)',
25+
'(blur)': 'onTouched()',
26+
'[value]': 'value',
27+
'[class.ng-untouched]': 'cd.control?.untouched == true',
28+
'[class.ng-touched]': 'cd.control?.touched == true',
29+
'[class.ng-pristine]': 'cd.control?.pristine == true',
30+
'[class.ng-dirty]': 'cd.control?.dirty == true',
31+
'[class.ng-valid]': 'cd.control?.valid == true',
32+
'[class.ng-invalid]': 'cd.control?.valid == false'
3533
}
3634
})
3735
export class DefaultValueAccessor implements ControlValueAccessor {
@@ -50,4 +48,4 @@ export class DefaultValueAccessor implements ControlValueAccessor {
5048
registerOnChange(fn): void { this.onChange = fn; }
5149

5250
registerOnTouched(fn): void { this.onTouched = fn; }
53-
}
51+
}

‎modules/angular2/src/forms/directives/form_model_directive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ const formDirectiveBinding = CONST_EXPR(
6060
hostInjector: [formDirectiveBinding],
6161
properties: ['form: ng-form-model'],
6262
lifecycle: [onChange],
63-
hostListeners: {
64-
'submit': 'onSubmit()',
63+
host: {
64+
'(submit)': 'onSubmit()',
6565
},
6666
events: ['ngSubmit'],
6767
exportAs: 'form'
@@ -113,4 +113,4 @@ export class FormModelDirective extends ControlContainerDirective implements For
113113
dir.valueAccessor.writeValue(c.value);
114114
});
115115
}
116-
}
116+
}

‎modules/angular2/src/forms/directives/select_control_value_accessor.ts‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor';
1717
*/
1818
@Directive({
1919
selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
20-
hostListeners: {
21-
'change': 'onChange($event.target.value)',
22-
'input': 'onChange($event.target.value)',
23-
'blur': 'onTouched()'
24-
},
25-
hostProperties: {
26-
'value': 'value',
27-
'cd.control?.untouched == true': 'class.ng-untouched',
28-
'cd.control?.touched == true': 'class.ng-touched',
29-
'cd.control?.pristine == true': 'class.ng-pristine',
30-
'cd.control?.dirty == true': 'class.ng-dirty',
31-
'cd.control?.valid == true': 'class.ng-valid',
32-
'cd.control?.valid == false': 'class.ng-invalid'
20+
host: {
21+
'(change)': 'onChange($event.target.value)',
22+
'(input)': 'onChange($event.target.value)',
23+
'(blur)': 'onTouched()',
24+
'[value]': 'value',
25+
'[class.ng-untouched]': 'cd.control?.untouched == true',
26+
'[class.ng-touched]': 'cd.control?.touched == true',
27+
'[class.ng-pristine]': 'cd.control?.pristine == true',
28+
'[class.ng-dirty]': 'cd.control?.dirty == true',
29+
'[class.ng-valid]': 'cd.control?.valid == true',
30+
'[class.ng-invalid]': 'cd.control?.valid == false'
3331
}
3432
})
3533
export class SelectControlValueAccessor implements ControlValueAccessor {
@@ -48,4 +46,4 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
4846

4947
registerOnChange(fn): void { this.onChange = fn; }
5048
registerOnTouched(fn): void { this.onTouched = fn; }
51-
}
49+
}

‎modules/angular2/src/forms/directives/template_driven_form_directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
1616
@Directive({
1717
selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
1818
hostInjector: [formDirectiveBinding],
19-
hostListeners: {
20-
'submit': 'onSubmit()',
19+
host: {
20+
'(submit)': 'onSubmit()',
2121
},
2222
events: ['ngSubmit'],
2323
exportAs: 'form'

0 commit comments

Comments
 (0)