honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(query): added support for querying by var bindings

This commit is contained in:
vsavkin 2015-06-15 15:18:11 -07:00
parent cd21df3572
commit b0e2ebda70
12 changed files with 407 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/angular2/src/core/annotations_impl/di.ts
View File

@ -1,4 +1,4 @@
import {CONST, Type, stringify, isPresent} from 'angular2/src/facade/lang';
import {CONST, Type, stringify, isPresent, StringWrapper, isString} from 'angular2/src/facade/lang';
import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
import {resolveForwardRef} from 'angular2/di';
@ -55,12 +55,17 @@ export class Attribute extends DependencyAnnotation {
@CONST()
export class Query extends DependencyAnnotation {
descendants: boolean;
constructor(private _selector:Type, {descendants = false}: {descendants?: boolean} = {}) {
constructor(private _selector: Type | string,
{descendants = false}: {descendants?: boolean} = {}) {
super();
this.descendants = descendants;
}
get selector() { return resolveForwardRef(this._selector); }
get isVarBindingQuery(): boolean { return isString(this.selector); }
get varBindings(): List<string> { return StringWrapper.split(this.selector, new RegExp(",")); }
toString() { return `@Query(${stringify(this.selector)})`; }
}

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

@ -13,7 +13,6 @@ export class ElementBinder {
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.');

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

@ -393,7 +393,8 @@ export class ProtoElementInjector {
_strategy: _ProtoElementInjectorStrategy;
static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
firstBindingIsComponent: boolean, distanceToParent: number) {
firstBindingIsComponent: boolean, distanceToParent: number,
directiveVariableBindings: Map<string, number>) {
var bd = [];
ProtoElementInjector._createDirectiveBindingData(bindings, bd, firstBindingIsComponent);
@ -401,7 +402,8 @@ export class ProtoElementInjector {
ProtoElementInjector._createViewInjectorBindingData(bindings, bd);
}
ProtoElementInjector._createHostInjectorBindingData(bindings, bd, firstBindingIsComponent);
return new ProtoElementInjector(parent, index, bd, distanceToParent, firstBindingIsComponent);
return new ProtoElementInjector(parent, index, bd, distanceToParent, firstBindingIsComponent,
directiveVariableBindings);
}
private static _createDirectiveBindingData(dirBindings: List<ResolvedBinding>,
@ -450,7 +452,8 @@ export class ProtoElementInjector {
}
constructor(public parent: ProtoElementInjector, public index: int, bd: List<BindingData>,
public distanceToParent: number, public _firstBindingIsComponent: boolean) {
public distanceToParent: number, public _firstBindingIsComponent: boolean,
public directiveVariableBindings: Map<string, number>) {
var length = bd.length;
this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
this.hostActionAccessors = ListWrapper.createFixedSize(length);
@ -693,12 +696,15 @@ export class ElementInjector extends TreeNode<ElementInjector> {
}
onAllChangesDone(): void {
if (isPresent(this._query0) && this._query0.originator === this)
if (isPresent(this._query0) && this._query0.originator === this) {
this._query0.list.fireCallbacks();
if (isPresent(this._query1) && this._query1.originator === this)
}
if (isPresent(this._query1) && this._query1.originator === this) {
this._query1.list.fireCallbacks();
if (isPresent(this._query2) && this._query2.originator === this)
}
if (isPresent(this._query2) && this._query2.originator === this) {
this._query2.list.fireCallbacks();
}
}
hydrate(injector: Injector, host: ElementInjector, preBuiltObjects: PreBuiltObjects): void {
@ -716,9 +722,22 @@ export class ElementInjector extends TreeNode<ElementInjector> {
this._checkShadowDomAppInjector(this._shadowDomAppInjector);
this._strategy.hydrate();
this._addVarBindingsToQueries();
this.hydrated = true;
}
hasVariableBinding(name: string): boolean {
var vb = this._proto.directiveVariableBindings;
return isPresent(vb) && MapWrapper.contains(vb, name);
}
getVariableBinding(name: string): any {
var index = MapWrapper.get(this._proto.directiveVariableBindings, name);
return isPresent(index) ? this.getDirectiveAtIndex(<number>index) : this.getElementRef();
}
private _createShadowDomAppInjector(componentDirective: DirectiveBinding,
appInjector: Injector): Injector {
if (!ListWrapper.isEmpty(componentDirective.resolvedAppInjectables)) {
@ -752,6 +771,10 @@ export class ElementInjector extends TreeNode<ElementInjector> {
return this._proto.hostActionAccessors;
}
getDirectiveVariableBindings(): Map<string, number> {
return this._proto.directiveVariableBindings;
}
getComponent(): any { return this._strategy.getComponent(); }
getElementRef(): ElementRef {
@ -884,6 +907,23 @@ export class ElementInjector extends TreeNode<ElementInjector> {
}
}
private _addVarBindingsToQueries(): void {
this._addVarBindingsToQuery(this._query0);
this._addVarBindingsToQuery(this._query1);
this._addVarBindingsToQuery(this._query2);
}
private _addVarBindingsToQuery(queryRef: QueryRef): void {
if (isBlank(queryRef) || !queryRef.query.isVarBindingQuery) return;
var vb = queryRef.query.varBindings;
for (var i = 0; i < vb.length; ++i) {
if (this.hasVariableBinding(vb[i])) {
queryRef.list.add(this.getVariableBinding(vb[i]));
}
}
}
private _createQueryRef(query: Query): void {
var queryList = new QueryList<any>();
if (isBlank(this._query0)) {
@ -1454,13 +1494,32 @@ class QueryRef {
visit(inj: ElementInjector, aggregator: any[]): void {
if (isBlank(inj) || !inj._hasQuery(this)) return;
if (inj.hasDirective(this.query.selector)) {
aggregator.push(inj.get(this.query.selector));
if (this.query.isVarBindingQuery) {
this._aggregateVariableBindings(inj, aggregator);
} else {
this._aggregateDirective(inj, aggregator);
}
var child = inj._head;
while (isPresent(child)) {
this.visit(child, aggregator);
child = child._next;
}
}
private _aggregateVariableBindings(inj: ElementInjector, aggregator: List<any>): void {
var vb = this.query.varBindings;
for (var i = 0; i < vb.length; ++i) {
if (inj.hasVariableBinding(vb[i])) {
aggregator.push(inj.getVariableBinding(vb[i]));
}
}
}
private _aggregateDirective(inj: ElementInjector, aggregator: List<any>): void {
if (inj.hasDirective(this.query.selector)) {
aggregator.push(inj.get(this.query.selector));
}
}
}

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

@ -336,9 +336,13 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
// so that, when hydrating, $implicit can be set to the element.
var hasVariables = MapWrapper.size(renderElementBinder.variableBindings) > 0;
if (directiveBindings.length > 0 || hasVariables) {
protoElementInjector = ProtoElementInjector.create(
parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
var directiveVariableBindings =
createDirectiveVariableBindings(renderElementBinder, directiveBindings);
protoElementInjector =
ProtoElementInjector.create(parentPeiWithDistance.protoElementInjector, binderIndex,
directiveBindings, isPresent(componentDirectiveBinding),
parentPeiWithDistance.distance, directiveVariableBindings);
protoElementInjector.attributes = renderElementBinder.readAttributes;
}
return protoElementInjector;
@ -351,12 +355,8 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
if (renderElementBinder.parentIndex !== -1) {
parent = protoView.elementBinders[renderElementBinder.parentIndex];
}
var directiveVariableBindings =
createDirectiveVariableBindings(renderElementBinder, directiveBindings);
var elBinder =
protoView.bindElement(parent, renderElementBinder.distanceToParent, protoElementInjector,
directiveVariableBindings, componentDirectiveBinding);
var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
protoElementInjector, componentDirectiveBinding);
protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
// variables
// The view's locals needs to have a full set of variable names at construction time
@ -371,7 +371,7 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
export function createDirectiveVariableBindings(
renderElementBinder: renderApi.ElementBinder,
directiveBindings: List<DirectiveBinding>): Map<String, number> {
directiveBindings: List<DirectiveBinding>): Map<string, number> {
var directiveVariableBindings = MapWrapper.create();
MapWrapper.forEach(renderElementBinder.variableBindings, (templateName, exportAs) => {
var dirIndex = _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs);

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

@ -177,11 +177,9 @@ 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, directiveVariableBindings, componentDirective);
var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, componentDirective);
this.elementBinders.push(elBinder);
return elBinder;

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

@ -149,28 +149,30 @@ 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._populateViewLocals(view, elementInjector);
this._setUpEventEmitters(view, elementInjector, i);
this._setUpHostActions(view, elementInjector, i);
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));
}
});
}
}
}
view.changeDetector.hydrate(view.context, view.locals, view);
}
_populateViewLocals(view: viewModule.AppView, elementInjector: eli.ElementInjector): void {
if (isPresent(elementInjector.getDirectiveVariableBindings())) {
MapWrapper.forEach(elementInjector.getDirectiveVariableBindings(), (directiveIndex, name) => {
if (isBlank(directiveIndex)) {
view.locals.set(name, elementInjector.getElementRef().domElement);
} else {
view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
}
});
}
}
_getOrCreateViewContainer(parentView: viewModule.AppView, boundElementIndex: number) {
var viewContainer = parentView.viewContainers[boundElementIndex];
if (isBlank(viewContainer)) {

4
modules/angular2/test/core/compiler/compiler_spec.ts
View File

@ -481,11 +481,11 @@ function createProtoView(elementBinders = null) {
function createComponentElementBinder(directiveResolver, type) {
var binding = createDirectiveBinding(directiveResolver, type);
return new ElementBinder(0, null, 0, null, null, binding);
return new ElementBinder(0, null, 0, null, binding);
}
function createViewportElementBinder(nestedProtoView) {
var elBinder = new ElementBinder(0, null, 0, null, null, null);
var elBinder = new ElementBinder(0, null, 0, null, null);
elBinder.nestedProtoView = nestedProtoView;
return elBinder;
}

48
modules/angular2/test/core/compiler/element_injector_spec.ts
View File

@ -163,6 +163,12 @@ class NeedsQuery {
constructor(@Query(CountingDirective) query: QueryList<CountingDirective>) { this.query = query; }
}
@Injectable()
class NeedsQueryByVarBindings {
query: QueryList<any>;
constructor(@Query("one,two") query: QueryList<any>) { this.query = query; }
}
@Injectable()
class NeedsElementRef {
elementRef;
@ -229,13 +235,13 @@ export function main() {
dynamicBindings.push(bind(i).toValue(i));
}
function createPei(parent, index, bindings, distance = 1, hasShadowRoot = false) {
function createPei(parent, index, bindings, distance = 1, hasShadowRoot = false, dirVariableBindings = null) {
var directiveBinding = ListWrapper.map(bindings, b => {
if (b instanceof DirectiveBinding) return b;
if (b instanceof Binding) return DirectiveBinding.createFromBinding(b, null);
return DirectiveBinding.createFromType(b, null);
});
return ProtoElementInjector.create(parent, index, directiveBinding, hasShadowRoot, distance);
return ProtoElementInjector.create(parent, index, directiveBinding, hasShadowRoot, distance, dirVariableBindings);
}
function humanize(tree: TreeNode<any>, names: List<List<any>>) {
@ -248,10 +254,10 @@ export function main() {
}
function injector(bindings, lightDomAppInjector = null, isComponent: boolean = false,
preBuiltObjects = null, attributes = null) {
preBuiltObjects = null, attributes = null, dirVariableBindings = null) {
if (isBlank(lightDomAppInjector)) lightDomAppInjector = appInjector;
var proto = createPei(null, 0, bindings, 0, isComponent);
var proto = createPei(null, 0, bindings, 0, isComponent, dirVariableBindings);
proto.attributes = attributes;
var inj = proto.instantiate(null);
@ -942,7 +948,7 @@ export function main() {
});
});
describe('directive queries', () => {
describe('queries', () => {
var preBuildObjects = defaultPreBuiltObjects;
beforeEach(() => { _constructionCount = 0; });
@ -963,9 +969,39 @@ export function main() {
it('should contain directives on the same injector', () => {
var inj = injector(ListWrapper.concat([NeedsQuery, CountingDirective], extraBindings), null,
false, preBuildObjects);
false, preBuildObjects);
expectDirectives(inj.get(NeedsQuery).query, CountingDirective, [0]);
})
it('should contain the element when no directives are bound to the var binding', () => {
var dirs = [NeedsQueryByVarBindings];
var dirVariableBindings = MapWrapper.createFromStringMap({
"one": null // element
});
var inj = injector(ListWrapper.concat(dirs, extraBindings), null,
false, preBuildObjects, null, dirVariableBindings);
expect(inj.get(NeedsQueryByVarBindings).query.first).toBeAnInstanceOf(ElementRef);
});
it('should contain directives on the same injector when querying by variable bindings' +
'in the order of var bindings specified in the query', () => {
var dirs = [NeedsQueryByVarBindings, NeedsDirective, SimpleDirective];
var dirVariableBindings = MapWrapper.createFromStringMap({
"one": 2, // 2 is the index of SimpleDirective
"two": 1 // 1 is the index of NeedsDirective
});
var inj = injector(ListWrapper.concat(dirs, extraBindings), null,
false, preBuildObjects, null, dirVariableBindings);
// NeedsQueryByVarBindings queries "one,two", so SimpleDirective should be before NeedsDirective
expect(inj.get(NeedsQueryByVarBindings).query.first).toBeAnInstanceOf(SimpleDirective);
expect(inj.get(NeedsQueryByVarBindings).query.last).toBeAnInstanceOf(NeedsDirective);
});
// Dart's restriction on static types in (a is A) makes this feature hard to implement.

395
modules/angular2/test/core/compiler/query_integration_spec.ts
View File

@ -26,154 +26,247 @@ export function main() {
BrowserDomAdapter.makeCurrent();
describe('Query API', () => {
it('should contain all direct child directives in the light dom',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query text="2"><div text="3">' +
'<div text="too-deep"></div>' +
'</div></needs-query>' +
'<div text="4"></div>';
describe("querying by directive type", () => {
it('should contain all direct child directives in the light dom',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query text="2"><div text="3">' +
'<div text="too-deep"></div>' +
'</div></needs-query>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
async.done();
});
}));
it('should contain all directives in the light dom when descendants flag is used',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query-desc text="2"><div text="3">' +
'<div text="4"></div>' +
'</div></needs-query-desc>' +
'<div text="5"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|4|');
async.done();
});
}));
it('should contain all directives in the light dom',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query text="2"><div text="3"></div></needs-query>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
async.done();
});
}));
// TODO(rado): The test below should be using descendants: false,
// but due to a bug with how injectors are hooked up query considers the
// directives to be distances 2 instead of direct children.
it('should reflect dynamically inserted directives',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<div text="1"></div>' +
'<needs-query-desc text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query-desc>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|');
view.context.shouldShow = true;
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
async.done();
});
}));
it('should reflect moved directives',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<div text="1"></div>' +
'<needs-query-desc text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query-desc>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
view.detectChanges();
expect(view.rootNodes).toHaveText('2|1d|2d|3d|');
view.context.list = ['3d', '2d'];
view.detectChanges();
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3d|2d|');
async.done();
});
}));
it('should notify query on change',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-desc #q>' +
'<div text="1"></div>' +
'<div *ng-if="shouldShow" text="2"></div>' +
'</needs-query-desc>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.detectChanges();
q.query.onChange(() => {
expect(q.query.first.text).toEqual("1");
expect(q.query.last.text).toEqual("2");
async.done();
});
}));
view.context.shouldShow = true;
view.detectChanges();
});
}));
it('should contain all directives in the light dom when descendants flag is used',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query-desc text="2"><div text="3">' +
'<div text="4"></div>' +
'</div></needs-query-desc>' +
'<div text="5"></div>';
it("should notify child's query before notifying parent's query",
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-desc #q1>' +
'<needs-query-desc #q2>' +
'<div text="1"></div>' +
'</needs-query-desc>' +
'</needs-query-desc>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|4|');
tb.createView(MyComp, {html: template})
.then((view) => {
var q1 = view.rawView.locals.get("q1");
var q2 = view.rawView.locals.get("q2");
var firedQ2 = false;
q2.query.onChange(() => { firedQ2 = true; });
q1.query.onChange(() => {
expect(firedQ2).toBe(true);
async.done();
});
}));
view.detectChanges();
});
}));
it('should contain all directives in the light dom',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<div text="1"></div>' +
'<needs-query text="2"><div text="3"></div></needs-query>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
async.done();
});
}));
// TODO(rado): The test below should be using descendants: false,
// but due to a bug with how injectors are hooked up query considers the
// directives to be distances 2 instead of direct children.
it('should reflect dynamically inserted directives',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<div text="1"></div>' +
'<needs-query-desc text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query-desc>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|');
view.context.shouldShow = true;
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3|');
async.done();
});
}));
it('should reflect moved directives',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<div text="1"></div>' +
'<needs-query-desc text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query-desc>' +
'<div text="4"></div>';
tb.createView(MyComp, {html: template})
.then((view) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('2|1d|2d|3d|');
view.context.list = ['3d', '2d'];
view.detectChanges();
view.detectChanges();
expect(view.rootNodes).toHaveText('2|3d|2d|');
async.done();
});
}));
});
describe("onChange", () => {
it('should notify query on change',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-desc #q>' +
'<div text="1"></div>' +
'<div *ng-if="shouldShow" text="2"></div>' +
'</needs-query-desc>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.detectChanges();
q.query.onChange(() => {
expect(q.query.first.text).toEqual("1");
expect(q.query.last.text).toEqual("2");
async.done();
});
view.context.shouldShow = true;
view.detectChanges();
});
}));
it("should notify child's query before notifying parent's query",
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-desc #q1>' +
'<needs-query-desc #q2>' +
'<div text="1"></div>' +
'</needs-query-desc>' +
'</needs-query-desc>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q1 = view.rawView.locals.get("q1");
var q2 = view.rawView.locals.get("q2");
var firedQ2 = false;
q2.query.onChange(() => { firedQ2 = true; });
q1.query.onChange(() => {
expect(firedQ2).toBe(true);
async.done();
});
view.detectChanges();
});
}));
});
describe("querying by var binding", () => {
it('should contain all the child directives in the light dom with the given var binding',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<needs-query-by-var-binding #q>' +
'<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
'</needs-query-by-var-binding>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.context.list = ['1d', '2d'];
view.detectChanges();
expect(q.query.first.text).toEqual("1d");
expect(q.query.last.text).toEqual("2d");
async.done();
});
}));
it('should support querying by multiple var bindings',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-by-var-bindings #q>' +
'<div text="one" #text-label1="textDir"></div>' +
'<div text="two" #text-label2="textDir"></div>' +
'</needs-query-by-var-bindings>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.detectChanges();
expect(q.query.first.text).toEqual("one");
expect(q.query.last.text).toEqual("two");
async.done();
});
}));
it('should reflect dynamically inserted directives',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template =
'<needs-query-by-var-binding #q>' +
'<div *ng-for="#item of list" [text]="item" #text-label="textDir"></div>' +
'</needs-query-by-var-binding>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.context.list = ['1d', '2d'];
view.detectChanges();
view.context.list = ['2d', '1d'];
view.detectChanges();
expect(q.query.last.text).toEqual("1d");
async.done();
});
}));
it('should contain all the elements in the light dom with the given var binding',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = '<needs-query-by-var-binding #q>' +
'<div template="ng-for: #item of list">' +
'<div #text-label>{{item}}</div>' +
'</div>' +
'</needs-query-by-var-binding>';
tb.createView(MyComp, {html: template})
.then((view) => {
var q = view.rawView.locals.get("q");
view.context.list = ['1d', '2d'];
view.detectChanges();
expect(q.query.first.domElement).toHaveText("1d");
expect(q.query.last.domElement).toHaveText("2d");
async.done();
});
}));
});
});
}
@Directive({selector: '[text]', properties: ['text']})
@Directive({selector: '[text]', properties: ['text'], exportAs: 'textDir'})
@Injectable()
class TextDirective {
text: string;
@ -198,8 +291,38 @@ class NeedsQueryDesc {
}
}
@Component({selector: 'needs-query-by-var-binding'})
@View({directives: [], template: '<content>'})
@Injectable()
class NeedsQueryByLabel {
query: QueryList<any>;
constructor(@Query("textLabel", {descendants: true}) query: QueryList<any>) {
this.query = query;
}
}
@Component({selector: 'needs-query-by-var-bindings'})
@View({directives: [], template: '<content>'})
@Injectable()
class NeedsQueryByTwoLabels {
query: QueryList<any>;
constructor(@Query("textLabel1,textLabel2", {descendants: true}) query: QueryList<any>) {
this.query = query;
}
}
@Component({selector: 'my-comp'})
@View({directives: [NeedsQuery, NeedsQueryDesc, TextDirective, NgIf, NgFor]})
@View({
directives: [
NeedsQuery,
NeedsQueryDesc,
NeedsQueryByLabel,
NeedsQueryByTwoLabels,
TextDirective,
NgIf,
NgFor
]
})
@Injectable()
class MyComp {
shouldShow: boolean;

4
modules/angular2/test/core/compiler/view_manager_spec.ts
View File

@ -58,11 +58,11 @@ export function main() {
return DirectiveBinding.createFromType(type, annotation);
}
function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null, null); }
function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null); }
function createComponentElBinder(nestedProtoView = null) {
var binding = createDirectiveBinding(SomeComponent);
var binder = new ElementBinder(0, null, 0, null, null, binding);
var binder = new ElementBinder(0, null, 0, null, binding);
binder.nestedProtoView = nestedProtoView;
return binder;
}

4
modules/angular2/test/core/compiler/view_manager_utils_spec.ts
View File

@ -48,11 +48,11 @@ export function main() {
return DirectiveBinding.createFromType(type, annotation);
}
function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null, null); }
function createEmptyElBinder() { return new ElementBinder(0, null, 0, null, null); }
function createComponentElBinder(nestedProtoView = null) {
var binding = createDirectiveBinding(SomeComponent);
var binder = new ElementBinder(0, null, 0, null, null, binding);
var binder = new ElementBinder(0, null, 0, null, binding);
binder.nestedProtoView = nestedProtoView;
return binder;
}

2
modules/benchmarks/src/element_injector/element_injector_benchmark.ts
View File

@ -19,7 +19,7 @@ export function main() {
DirectiveBinding.createFromType(B, null),
DirectiveBinding.createFromType(C, null)
];
var proto = ProtoElementInjector.create(null, 0, bindings, false, 0);
var proto = ProtoElementInjector.create(null, 0, bindings, false, 0, null);
var elementInjector = proto.instantiate(null);
function instantiate() {