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

feat(view): added support for exportAs, so any directive can be assigned to a variable

Browse Source
This commit is contained in:
vsavkin
2015-06-04 13:45:08 -07:00
parent 4eb8c9b2dd
commit 69b75b7fd8
14 changed files with 298 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -746,9 +746,35 @@ export class Directive extends Injectable {
*/
hostInjector: List<any>;
/**
* Defines the name that can be used in the template to assign this directive to a variable.
*
* ## Simple Example
*
* @Directive({
* selector: 'child-dir',
* exportAs: 'child'
* })
* class ChildDir {
* }
*
* @Component({
* selector: 'main',
* })
* @View({
* template: `<child-dir #c="child"></child-dir>`,
* directives: [ChildDir]
* })
* class MainComponent {
* }
*
* ```
*/
exportAs: string;
constructor({
selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, lifecycle, hostInjector, compileChildren = true,
hostActions, lifecycle, hostInjector, exportAs, compileChildren = true,
}: {
selector?: string,
properties?: List<string>,
@ -759,6 +785,7 @@ export class Directive extends Injectable {
hostActions?: StringMap<string, string>,
lifecycle?: List<LifecycleEvent>,
hostInjector?: List<any>,
exportAs?: string,
compileChildren?: boolean
} = {}) {
super();
@ -769,6 +796,7 @@ export class Directive extends Injectable {
this.hostProperties = hostProperties;
this.hostAttributes = hostAttributes;
this.hostActions = hostActions;
this.exportAs = exportAs;
this.lifecycle = lifecycle;
this.compileChildren = compileChildren;
this.hostInjector = hostInjector;
@ -973,7 +1001,7 @@ export class Component extends Directive {
viewInjector: List<any>;
constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
hostActions, appInjector, lifecycle, hostInjector, viewInjector,
hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector,
changeDetection = DEFAULT, compileChildren = true}: {
selector?: string,
properties?: List<string>,
@ -982,6 +1010,7 @@ export class Component extends Directive {
hostProperties?: StringMap<string, string>,
hostAttributes?: StringMap<string, string>,
hostActions?: StringMap<string, string>,
exportAs?: string,
appInjector?: List<any>,
lifecycle?: List<LifecycleEvent>,
hostInjector?: List<any>,
@ -997,6 +1026,7 @@ export class Component extends Directive {
hostProperties: hostProperties,
hostAttributes: hostAttributes,
hostActions: hostActions,
exportAs: exportAs,
hostInjector: hostInjector,
lifecycle: lifecycle,
compileChildren: compileChildren

2
modules/angular2/src/core/compiler/element_binder.ts
View File

@ -8,8 +8,10 @@ import * as viewModule from './view';
export class ElementBinder {
nestedProtoView: viewModule.AppProtoView;
hostListeners: StringMap<string, Map<number, AST>>;
constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
public protoElementInjector: eiModule.ProtoElementInjector,
public directiveVariableBindings: Map<string, number>,
public componentDirective: DirectiveBinding) {
if (isBlank(index)) {
throw new BaseException('null index not allowed.');

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

@ -317,7 +317,9 @@ export class DirectiveBinding extends ResolvedBinding {
callOnAllChangesDone: hasLifecycleHook(onAllChangesDone, rb.key.token, ann),
changeDetection: ann instanceof
Component ? ann.changeDetection : null
Component ? ann.changeDetection : null,
exportAs: ann.exportAs
});
return new DirectiveBinding(rb.key, rb.factory, deps, rb.providedAsPromise,
resolvedAppInjectables, resolvedHostInjectables,
@ -422,15 +424,6 @@ export class ProtoElementInjector {
eventEmitterAccessors: List<List<EventEmitterAccessor>>;
hostActionAccessors: List<List<HostActionAccessor>>;
/** Whether the element is exported as $implicit. */
exportElement: boolean;
/** Whether the component instance is exported as $implicit. */
exportComponent: boolean;
/** The variable name that will be set to $implicit for the element. */
exportImplicitName: string;
_strategy: _ProtoElementInjectorStrategy;
static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
@ -483,9 +476,6 @@ export class ProtoElementInjector {
constructor(public parent: ProtoElementInjector, public index: int, bd: List<BindingData>,
public distanceToParent: number, public _firstBindingIsComponent: boolean) {
this.exportComponent = false;
this.exportElement = false;
var length = bd.length;
this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
this.hostActionAccessors = ListWrapper.createFixedSize(length);
@ -1164,15 +1154,6 @@ export class ElementInjector extends TreeNode<ElementInjector> {
hasInstances(): boolean { return this._constructionCounter > 0; }
/** Gets whether this element is exporting a component instance as $implicit. */
isExportingComponent(): boolean { return this._proto.exportComponent; }
/** Gets whether this element is exporting its element as $implicit. */
isExportingElement(): boolean { return this._proto.exportElement; }
/** Get the name to which this element's $implicit is to be assigned. */
getExportImplicitName(): string { return this._proto.exportImplicitName; }
getLightDomAppInjector(): Injector { return this._lightDomAppInjector; }
getShadowDomAppInjector(): Injector { return this._shadowDomAppInjector; }

63
modules/angular2/src/core/compiler/proto_view_factory.ts
View File

@ -1,7 +1,7 @@
import {Injectable} from 'angular2/di';
import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import {reflector} from 'angular2/src/reflection/reflection';
import {
@ -309,7 +309,7 @@ function _createElementBinders(protoView, elementBinders, allDirectiveBindings)
componentDirectiveBinding, directiveBindings);
_createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
componentDirectiveBinding);
componentDirectiveBinding, directiveBindings);
}
}
@ -343,28 +343,20 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
protoElementInjector.attributes = renderElementBinder.readAttributes;
if (hasVariables) {
protoElementInjector.exportComponent = isPresent(componentDirectiveBinding);
protoElementInjector.exportElement = isBlank(componentDirectiveBinding);
// experiment
var exportImplicitName = MapWrapper.get(renderElementBinder.variableBindings, '\$implicit');
if (isPresent(exportImplicitName)) {
protoElementInjector.exportImplicitName = exportImplicitName;
}
}
}
return protoElementInjector;
}
function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
protoElementInjector, componentDirectiveBinding): ElementBinder {
protoElementInjector, componentDirectiveBinding, directiveBindings): ElementBinder {
var parent = null;
if (renderElementBinder.parentIndex !== -1) {
parent = protoView.elementBinders[renderElementBinder.parentIndex];
}
var directiveVariableBindings = createDirectiveVariableBindings(renderElementBinder, directiveBindings);
var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
protoElementInjector, componentDirectiveBinding);
protoElementInjector, directiveVariableBindings, componentDirectiveBinding);
protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
// variables
// The view's locals needs to have a full set of variable names at construction time
@ -377,6 +369,49 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
return elBinder;
}
export function createDirectiveVariableBindings(renderElementBinder:renderApi.ElementBinder,
directiveBindings:List<DirectiveBinding>): Map<String, number> {
var directiveVariableBindings = MapWrapper.create();
MapWrapper.forEach(renderElementBinder.variableBindings, (templateName, exportAs) => {
var dirIndex = _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs);
MapWrapper.set(directiveVariableBindings, templateName, dirIndex);
});
return directiveVariableBindings;
}
function _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs) {
var matchedDirectiveIndex = null;
var matchedDirective;
for (var i = 0; i < directiveBindings.length; ++i) {
var directive = directiveBindings[i];
if (_directiveExportAs(directive) == exportAs) {
if (isPresent(matchedDirective)) {
throw new BaseException(`More than one directive have exportAs = '${exportAs}'. Directives: [${matchedDirective.displayName}, ${directive.displayName}]`);
}
matchedDirectiveIndex = i;
matchedDirective = directive;
}
}
if (isBlank(matchedDirective) && exportAs !== "$implicit") {
throw new BaseException(`Cannot find directive with exportAs = '${exportAs}'`);
}
return matchedDirectiveIndex;
}
function _directiveExportAs(directive):string {
var directiveExportAs = directive.metadata.exportAs;
if (isBlank(directiveExportAs) && directive.metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
return "$implicit";
} else {
return directiveExportAs;
}
}
function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
var dirs = elementBinders[boundElementIndex].directives;

7
modules/angular2/src/core/compiler/view.ts
View File

@ -183,9 +183,12 @@ export class AppProtoView {
bindElement(parent: ElementBinder, distanceToParent: int,
protoElementInjector: ProtoElementInjector,
directiveVariableBindings: Map<string, number>,
componentDirective: DirectiveBinding = null): ElementBinder {
var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, componentDirective);
var elBinder =
new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, directiveVariableBindings, componentDirective);
ListWrapper.push(this.elementBinders, elBinder);
return elBinder;
}

18
modules/angular2/src/core/compiler/view_manager_utils.ts
View File

@ -206,20 +206,22 @@ export class AppViewManagerUtils {
var binders = view.proto.elementBinders;
for (var i = 0; i < binders.length; ++i) {
var binder = binders[i];
var elementInjector = view.elementInjectors[i];
if (isPresent(elementInjector)) {
elementInjector.hydrate(appInjector, hostElementInjector, view.preBuiltObjects[i]);
this._setUpEventEmitters(view, elementInjector, i);
this._setUpHostActions(view, elementInjector, i);
// The exporting of $implicit is a special case. Since multiple elements will all export
// the different values as $implicit, directly assign $implicit bindings to the variable
// name.
var exportImplicitName = elementInjector.getExportImplicitName();
if (elementInjector.isExportingComponent()) {
view.locals.set(exportImplicitName, elementInjector.getComponent());
} else if (elementInjector.isExportingElement()) {
view.locals.set(exportImplicitName, elementInjector.getElementRef().domElement);
if (isPresent(binder.directiveVariableBindings)) {
MapWrapper.forEach(binder.directiveVariableBindings, (directiveIndex, name) => {
if (isBlank(directiveIndex)) {
view.locals.set(name, elementInjector.getElementRef().domElement);
} else {
view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
}
});
}
}
}

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

@ -36,7 +36,7 @@ export class ElementBinder {
directives: List<DirectiveBinder>;
nestedProtoView: ProtoViewDto;
propertyBindings: Map<string, ASTWithSource>;
variableBindings: Map<string, ASTWithSource>;
variableBindings: Map<string, string>;
// Note: this contains a preprocessed AST
// that replaced the values that should be extracted from the element
// with a local name
@ -52,7 +52,7 @@ export class ElementBinder {
directives?: List<DirectiveBinder>,
nestedProtoView?: ProtoViewDto,
propertyBindings?: Map<string, ASTWithSource>,
variableBindings?: Map<string, ASTWithSource>,
variableBindings?: Map<string, string>,
eventBindings?: List<EventBinding>,
textBindings?: List<ASTWithSource>,
readAttributes?: Map<string, string>
@ -142,9 +142,10 @@ export class DirectiveMetadata {
callOnInit: boolean;
callOnAllChangesDone: boolean;
changeDetection: string;
exportAs: string;
constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
hostActions, properties, readAttributes, type, callOnDestroy, callOnChange,
callOnCheck, callOnInit, callOnAllChangesDone, changeDetection}: {
callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
id?: string,
selector?: string,
compileChildren?: boolean,
@ -161,7 +162,8 @@ export class DirectiveMetadata {
callOnCheck?: boolean,
callOnInit?: boolean,
callOnAllChangesDone?: boolean,
changeDetection?: string
changeDetection?: string,
exportAs?: string
}) {
this.id = id;
this.selector = selector;
@ -180,6 +182,7 @@ export class DirectiveMetadata {
this.callOnInit = callOnInit;
this.callOnAllChangesDone = callOnAllChangesDone;
this.changeDetection = changeDetection;
this.exportAs = exportAs;
}
}

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

@ -18,6 +18,7 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map<string, any
['properties', _cloneIfPresent(meta.properties)],
['readAttributes', _cloneIfPresent(meta.readAttributes)],
['type', meta.type],
['exportAs', meta.exportAs],
['callOnDestroy', meta.callOnDestroy],
['callOnCheck', meta.callOnCheck],
['callOnInit', meta.callOnInit],
@ -44,6 +45,7 @@ export function directiveMetadataFromMap(map: Map<string, any>): DirectiveMetada
properties:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'properties')),
readAttributes:<List<string>>_cloneIfPresent(MapWrapper.get(map, 'readAttributes')),
type:<number>MapWrapper.get(map, 'type'),
exportAs:<string>MapWrapper.get(map, 'exportAs'),
callOnDestroy:<boolean>MapWrapper.get(map, 'callOnDestroy'),
callOnCheck:<boolean>MapWrapper.get(map, 'callOnCheck'),
callOnChange:<boolean>MapWrapper.get(map, 'callOnChange'),