cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Directive): Have a single Directive.host which mimics HTML

Browse Source 
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'
      }
    })
This commit is contained in:
Victor Berchet
2015-06-09 12:33:40 +02:00
committed by Tobias Bosch
parent 47b6b05017
commit f3b49378e4
32 changed files with 316 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
modules/angular2/src/core/annotations_impl/annotations.ts
View File

@ -585,6 +585,8 @@ export class Directive extends Injectable {
*/
events: List<string>;
// TODO(vicb): doc
/**
* Specifies which DOM hostListeners a directive listens to.
*
@ -643,9 +645,6 @@ export class Directive extends Injectable {
* 'change' event.
*
*/
hostListeners: StringMap<string, string>;
/**
* Specifies which DOM properties a directives updates.
*
@ -667,8 +666,6 @@ export class Directive extends Injectable {
* the host element.
* ```
*/
hostProperties: StringMap<string, string>;
/**
* Specifies static attributes that should be propagated to a host element. Attributes specified
* in `hostAttributes`
@ -691,8 +688,6 @@ export class Directive extends Injectable {
* will ensure that this element will get the "button" role.
* ```
*/
hostAttributes: StringMap<string, string>;
/**
* Specifies which DOM methods a directive can invoke.
*
@ -719,7 +714,8 @@ export class Directive extends Injectable {
* element.
* ```
*/
hostActions: StringMap<string, string>;
host: StringMap<string, string>;
/**
* Specifies which lifecycle should be notified to the directive.
@ -795,16 +791,13 @@ export class Directive extends Injectable {
exportAs: string;
constructor({
selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, lifecycle, hostInjector, exportAs, compileChildren = true,
selector, properties, events, host, lifecycle, hostInjector, exportAs,
compileChildren = true,
}: {
selector?: string,
properties?: List<string>,
events?: List<string>,
hostListeners?: StringMap<string, string>,
hostProperties?: StringMap<string, string>,
hostAttributes?: StringMap<string, string>,
hostActions?: StringMap<string, string>,
host?: StringMap<string, string>,
lifecycle?: List<LifecycleEvent>,
hostInjector?: List<any>,
exportAs?: string,
@ -814,10 +807,7 @@ export class Directive extends Injectable {
this.selector = selector;
this.properties = properties;
this.events = events;
this.hostListeners = hostListeners;
this.hostProperties = hostProperties;
this.hostAttributes = hostAttributes;
this.hostActions = hostActions;
this.host = host;
this.exportAs = exportAs;
this.lifecycle = lifecycle;
this.compileChildren = compileChildren;
@ -1022,16 +1012,12 @@ export class Component extends Directive {
*/
viewInjector: List<any>;
constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector,
changeDetection = DEFAULT, compileChildren = true}: {
constructor({selector, properties, events, host, exportAs, appInjector, lifecycle, hostInjector,
viewInjector, changeDetection = DEFAULT, compileChildren = true}: {
selector?: string,
properties?: List<string>,
events?: List<string>,
hostListeners?: StringMap<string, string>,
hostProperties?: StringMap<string, string>,
hostAttributes?: StringMap<string, string>,
hostActions?: StringMap<string, string>,
host?: StringMap<string, string>,
exportAs?: string,
appInjector?: List<any>,
lifecycle?: List<LifecycleEvent>,
@ -1044,10 +1030,7 @@ export class Component extends Directive {
selector: selector,
properties: properties,
events: events,
hostListeners: hostListeners,
hostProperties: hostProperties,
hostAttributes: hostAttributes,
hostActions: hostActions,
host: host,
exportAs: exportAs,
hostInjector: hostInjector,
lifecycle: lifecycle,

11
modules/angular2/src/core/compiler/element_injector.ts
View File

@ -293,21 +293,14 @@ export class DirectiveBinding extends ResolvedBinding {
var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ?
resolveBindings(ann.viewInjector) :
[];
var metadata = new DirectiveMetadata({
var metadata = DirectiveMetadata.create({
id: stringify(rb.key.token),
type: ann instanceof
Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
selector: ann.selector,
compileChildren: ann.compileChildren,
events: ann.events,
hostListeners:
isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
hostProperties:
isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
hostAttributes:
isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) :
null,
host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null,
properties: ann.properties,
readAttributes: DirectiveBinding._readAttributes(deps),

21
modules/angular2/src/forms/directives/checkbox_value_accessor.ts
View File

@ -16,15 +16,16 @@ import {ControlValueAccessor} from './control_value_accessor';
@Directive({
selector:
'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
hostProperties: {
'checked': 'checked',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.checked)',
'(blur)': 'onTouched()',
'[checked]': 'checked',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class CheckboxControlValueAccessor implements ControlValueAccessor {
@ -42,4 +43,4 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

26
modules/angular2/src/forms/directives/default_value_accessor.ts
View File

@ -19,19 +19,17 @@ import {isBlank} from 'angular2/src/facade/lang';
@Directive({
selector:
'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]',
hostListeners: {
'change': 'onChange($event.target.value)',
'input': 'onChange($event.target.value)',
'blur': 'onTouched()'
},
hostProperties: {
'value': 'value',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
'(blur)': 'onTouched()',
'[value]': 'value',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class DefaultValueAccessor implements ControlValueAccessor {
@ -50,4 +48,4 @@ export class DefaultValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

6
modules/angular2/src/forms/directives/form_model_directive.ts
View File

@ -60,8 +60,8 @@ const formDirectiveBinding = CONST_EXPR(
hostInjector: [formDirectiveBinding],
properties: ['form: ng-form-model'],
lifecycle: [onChange],
hostListeners: {
'submit': 'onSubmit()',
host: {
'(submit)': 'onSubmit()',
},
events: ['ngSubmit'],
exportAs: 'form'
@ -113,4 +113,4 @@ export class FormModelDirective extends ControlContainerDirective implements For
dir.valueAccessor.writeValue(c.value);
});
}
}
}

26
modules/angular2/src/forms/directives/select_control_value_accessor.ts
View File

@ -17,19 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor';
*/
@Directive({
selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
hostListeners: {
'change': 'onChange($event.target.value)',
'input': 'onChange($event.target.value)',
'blur': 'onTouched()'
},
hostProperties: {
'value': 'value',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
'(blur)': 'onTouched()',
'[value]': 'value',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class SelectControlValueAccessor implements ControlValueAccessor {
@ -48,4 +46,4 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

4
modules/angular2/src/forms/directives/template_driven_form_directive.ts
View File

@ -16,8 +16,8 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
@Directive({
selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
hostInjector: [formDirectiveBinding],
hostListeners: {
'submit': 'onSubmit()',
host: {
'(submit)': 'onSubmit()',
},
events: ['ngSubmit'],
exportAs: 'form'

90
modules/angular2/src/render/api.ts
View File

@ -1,6 +1,6 @@
import {isPresent} from 'angular2/src/facade/lang';
import {isPresent, isBlank, RegExpWrapper} from 'angular2/src/facade/lang';
import {Promise} from 'angular2/src/facade/async';
import {List, Map} from 'angular2/src/facade/collection';
import {List, Map, MapWrapper, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
import {ASTWithSource} from 'angular2/change_detection';
/**
@ -123,6 +123,11 @@ export class ProtoViewDto {
}
}
// group 1: property from "[property]"
// group 2: event from "(event)"
// group 3: action from "@action"
var hostRegExp = RegExpWrapper.create('^(?:(?:\\[([^\\]]+)\\])|(?:\\(([^\\)]+)\\))|(?:@(.+)))$');
export class DirectiveMetadata {
static get DIRECTIVE_TYPE() { return 0; }
static get COMPONENT_TYPE() { return 1; }
@ -130,10 +135,6 @@ export class DirectiveMetadata {
selector: string;
compileChildren: boolean;
events: List<string>;
hostListeners: Map<string, string>;
hostProperties: Map<string, string>;
hostAttributes: Map<string, string>;
hostActions: Map<string, string>;
properties: List<string>;
readAttributes: List<string>;
type: number;
@ -144,6 +145,11 @@ export class DirectiveMetadata {
callOnAllChangesDone: boolean;
changeDetection: string;
exportAs: string;
hostListeners: Map<string, string>;
hostProperties: Map<string, string>;
hostAttributes: Map<string, string>;
hostActions: Map<string, string>;
constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
hostActions, properties, readAttributes, type, callOnDestroy, callOnChange,
callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
@ -171,8 +177,8 @@ export class DirectiveMetadata {
this.compileChildren = isPresent(compileChildren) ? compileChildren : true;
this.events = events;
this.hostListeners = hostListeners;
this.hostProperties = hostProperties;
this.hostAttributes = hostAttributes;
this.hostProperties = hostProperties;
this.hostActions = hostActions;
this.properties = properties;
this.readAttributes = readAttributes;
@ -185,6 +191,76 @@ export class DirectiveMetadata {
this.changeDetection = changeDetection;
this.exportAs = exportAs;
}
static create({id, selector, compileChildren, events, host, properties, readAttributes, type,
callOnDestroy, callOnChange, callOnCheck, callOnInit, callOnAllChangesDone,
changeDetection, exportAs}: {
id?: string,
selector?: string,
compileChildren?: boolean,
events?: List<string>,
host?: Map<string, string>,
properties?: List<string>,
readAttributes?: List<string>,
type?: number,
callOnDestroy?: boolean,
callOnChange?: boolean,
callOnCheck?: boolean,
callOnInit?: boolean,
callOnAllChangesDone?: boolean,
changeDetection?: string,
exportAs?: string
}) {
let hostConfig = DirectiveMetadata.parseHostConfig(host);
return new DirectiveMetadata({
id: id,
selector: selector,
compileChildren: compileChildren,
events: events,
hostListeners: StringMapWrapper.get(hostConfig, 'hostListeners'),
hostProperties: StringMapWrapper.get(hostConfig, 'hostProperties'),
hostAttributes: StringMapWrapper.get(hostConfig, 'hostAttributes'),
hostActions: StringMapWrapper.get(hostConfig, 'hostActions'),
properties: properties,
readAttributes: readAttributes,
type: type,
callOnDestroy: callOnDestroy,
callOnChange: callOnChange,
callOnCheck: callOnCheck,
callOnInit: callOnInit,
callOnAllChangesDone: callOnAllChangesDone,
changeDetection: changeDetection,
exportAs: exportAs
});
}
static parseHostConfig(host?: Map<string, string>): StringMap<string, Map<string, string>> {
let hostListeners = MapWrapper.create();
let hostProperties = MapWrapper.create();
let hostAttributes = MapWrapper.create();
let hostActions = MapWrapper.create();
if (isPresent(host)) {
MapWrapper.forEach(host, (value: string, key: string) => {
var matches = RegExpWrapper.firstMatch(hostRegExp, key);
if (isBlank(matches)) {
MapWrapper.set(hostAttributes, key, value);
} else if (isPresent(matches[1])) {
MapWrapper.set(hostProperties, matches[1], value);
} else if (isPresent(matches[2])) {
MapWrapper.set(hostListeners, matches[2], value);
} else if (isPresent(matches[3])) {
MapWrapper.set(hostActions, matches[3], value);
}
});
}
return {
hostListeners: hostListeners, hostProperties: hostProperties, hostAttributes: hostAttributes,
hostActions: hostActions
}
}
}
// An opaque reference to a DomProtoView

36
modules/angular2/src/render/dom/compiler/directive_parser.ts
View File

@ -85,37 +85,36 @@ import {
}
});
ListWrapper.forEach(foundDirectiveIndices, (directiveIndex) => {
var directive = this._directives[directiveIndex];
var dirMetadata = this._directives[directiveIndex];
var directiveBinderBuilder = elementBinder.bindDirective(directiveIndex);
current.compileChildren = current.compileChildren && directive.compileChildren;
if (isPresent(directive.properties)) {
ListWrapper.forEach(directive.properties, (bindConfig) => {
current.compileChildren = current.compileChildren && dirMetadata.compileChildren;
if (isPresent(dirMetadata.properties)) {
ListWrapper.forEach(dirMetadata.properties, (bindConfig) => {
this._bindDirectiveProperty(bindConfig, current, directiveBinderBuilder);
});
}
if (isPresent(directive.hostListeners)) {
MapWrapper.forEach(directive.hostListeners, (action, eventName) => {
if (isPresent(dirMetadata.hostListeners)) {
MapWrapper.forEach(dirMetadata.hostListeners, (action, eventName) => {
this._bindDirectiveEvent(eventName, action, current, directiveBinderBuilder);
});
}
if (isPresent(directive.hostActions)) {
MapWrapper.forEach(directive.hostActions, (action, actionName) => {
if (isPresent(dirMetadata.hostActions)) {
MapWrapper.forEach(dirMetadata.hostActions, (action, actionName) => {
this._bindHostAction(actionName, action, current, directiveBinderBuilder);
});
}
if (isPresent(directive.hostProperties)) {
MapWrapper.forEach(directive.hostProperties, (hostPropertyName, directivePropertyName) => {
this._bindHostProperty(hostPropertyName, directivePropertyName, current,
directiveBinderBuilder);
if (isPresent(dirMetadata.hostProperties)) {
MapWrapper.forEach(dirMetadata.hostProperties, (expression, hostPropertyName) => {
this._bindHostProperty(hostPropertyName, expression, current, directiveBinderBuilder);
});
}
if (isPresent(directive.hostAttributes)) {
MapWrapper.forEach(directive.hostAttributes, (hostAttrValue, hostAttrName) => {
if (isPresent(dirMetadata.hostAttributes)) {
MapWrapper.forEach(dirMetadata.hostAttributes, (hostAttrValue, hostAttrName) => {
this._addHostAttribute(hostAttrName, hostAttrValue, current);
});
}
if (isPresent(directive.readAttributes)) {
ListWrapper.forEach(directive.readAttributes,
if (isPresent(dirMetadata.readAttributes)) {
ListWrapper.forEach(dirMetadata.readAttributes,
(attrName) => { elementBinder.readAttribute(attrName); });
}
});
@ -176,9 +175,8 @@ import {
directiveBinderBuilder.bindHostAction(actionName, actionExpression, ast);
}
_bindHostProperty(hostPropertyName, directivePropertyName, compileElement,
directiveBinderBuilder) {
var ast = this._parser.parseBinding(directivePropertyName,
_bindHostProperty(hostPropertyName, expression, compileElement, directiveBinderBuilder) {
var ast = this._parser.parseBinding(expression,
`hostProperties of ${compileElement.elementDescription}`);
directiveBinderBuilder.bindHostProperty(hostPropertyName, ast);
}

8
modules/angular2/src/render/dom/convert.ts
View File

@ -11,10 +11,10 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map<string, any
['id', meta.id],
['selector', meta.selector],
['compileChildren', meta.compileChildren],
['hostListeners', _cloneIfPresent(meta.hostListeners)],
['hostProperties', _cloneIfPresent(meta.hostProperties)],
['hostAttributes', _cloneIfPresent(meta.hostAttributes)],
['hostListeners', _cloneIfPresent(meta.hostListeners)],
['hostActions', _cloneIfPresent(meta.hostActions)],
['hostAttributes', _cloneIfPresent(meta.hostAttributes)],
['properties', _cloneIfPresent(meta.properties)],
['readAttributes', _cloneIfPresent(meta.readAttributes)],
['type', meta.type],
@ -38,8 +38,8 @@ export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetada
id:<string>MapWrapper.get(map, 'id'),
selector:<string>MapWrapper.get(map, 'selector'),
compileChildren:<boolean>MapWrapper.get(map, 'compileChildren'),
hostListeners:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostListeners')),
hostProperties:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostProperties')),
hostListeners:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostListeners')),
hostActions:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostActions')),
hostAttributes:<Map<string, string>>_cloneIfPresent(MapWrapper.get(map, 'hostAttributes')),
properties:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
@ -57,7 +57,7 @@ export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetada
/**
* Clones the [List] or [Map] `o` if it is present.
*/
function _cloneIfPresent(o) {
function _cloneIfPresent(o): any {
if (!isPresent(o)) return null;
return ListWrapper.isList(o) ? ListWrapper.clone(o) : MapWrapper.clone(o);
}

4
modules/angular2/src/render/dom/view/proto_view_builder.ts
View File

@ -48,11 +48,11 @@ export class ProtoViewBuilder {
var apiElementBinders = [];
var transitiveContentTagCount = 0;
ListWrapper.forEach(this.elements, (ebb) => {
ListWrapper.forEach(this.elements, (ebb: ElementBinderBuilder) => {
var propertySetters = MapWrapper.create();
var hostActions = MapWrapper.create();
var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb) => {
var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb: DirectiveBuilder) => {
ebb.eventBuilder.merge(dbb.eventBuilder);
MapWrapper.forEach(dbb.hostPropertyBindings, (_, hostPropertyName) => {

2
modules/angular2/src/router/router_link.ts
View File

@ -34,7 +34,7 @@ import {Location} from './location';
selector: '[router-link]',
properties: ['route: routerLink', 'params: routerParams'],
lifecycle: [onAllChangesDone],
hostListeners: {'^click': 'onClick()'}
host: {'(^click)': 'onClick()'}
})
export class RouterLink {
private _domEl;