Skip to content
Permalink
Browse files

fix(ivy): correctly associate output bound events with directives (#3…

…4479)

Previously, bound events were incorrectly bound to directives with
inputs matching the bound event attribute. This fixes that so bound
events can only be bound to directives with matching outputs.

Adds tests for all kinds of directive matching on bound attributes.

PR Close #34479
  • Loading branch information
ayazhafiz authored and alxhub committed Jul 31, 2019
1 parent 6c33b70 commit fde50679962352bca858c871e0c38dee07c58295
Showing with 95 additions and 12 deletions.
  1. +15 −12 packages/compiler/src/render3/view/t2_binder.ts
  2. +80 −0 packages/compiler/test/render3/view/binding_spec.ts
@@ -269,20 +269,23 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
});

// Associate attributes/bindings on the node with directives or with the node itself.
const processAttribute = (attribute: BoundAttribute | BoundEvent | TextAttribute) => {
let dir = directives.find(dir => dir.inputs.hasOwnProperty(attribute.name));
if (dir !== undefined) {
this.bindings.set(attribute, dir);
} else {
this.bindings.set(attribute, node);
}
};
node.attributes.forEach(processAttribute);
node.inputs.forEach(processAttribute);
node.outputs.forEach(processAttribute);
type BoundNode = BoundAttribute | BoundEvent | TextAttribute;
const setAttributeBinding =
(attribute: BoundNode, ioType: keyof Pick<DirectiveMeta, 'inputs'|'outputs'>) => {
const dir = directives.find(dir => dir[ioType].hasOwnProperty(attribute.name));
const binding = dir !== undefined ? dir : node;
this.bindings.set(attribute, binding);
};

// Node inputs (bound attributes) and text attributes can be bound to an
// input on a directive.
node.inputs.forEach(input => setAttributeBinding(input, 'inputs'));
node.attributes.forEach(attr => setAttributeBinding(attr, 'inputs'));
if (node instanceof Template) {
node.templateAttrs.forEach(processAttribute);
node.templateAttrs.forEach(attr => setAttributeBinding(attr, 'inputs'));
}
// Node outputs (bound events) can be bound to an output on a directive.
node.outputs.forEach(output => setAttributeBinding(output, 'outputs'));

// Recurse into the node's children.
node.children.forEach(child => child.visit(this));
@@ -31,6 +31,20 @@ function makeSelectorMatcher(): SelectorMatcher<DirectiveMeta> {
outputs: {},
isComponent: false,
});
matcher.addSelectables(CssSelector.parse('[hasOutput]'), {
name: 'HasOutput',
exportAs: null,
inputs: {},
outputs: {'outputBinding': 'outputBinding'},
isComponent: false,
});
matcher.addSelectables(CssSelector.parse('[hasInput]'), {
name: 'HasInput',
exportAs: null,
inputs: {'inputBinding': 'inputBinding'},
outputs: {},
isComponent: false,
});
return matcher;
}

@@ -98,4 +112,70 @@ describe('t2 binding', () => {
expect(elDirectives.length).toBe(1);
expect(elDirectives[0].name).toBe('Dir');
});

describe('matching inputs to consuming directives', () => {
it('should work for bound attributes', () => {
const template = parseTemplate('<div hasInput [inputBinding]="myValue"></div>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.inputs[0];
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
expect(consumer.name).toBe('HasInput');
});

it('should work for text attributes on elements', () => {
const template = parseTemplate('<div hasInput inputBinding="text"></div>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.attributes[1];
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
expect(consumer.name).toBe('HasInput');
});

it('should work for text attributes on templates', () => {
const template =
parseTemplate('<ng-template hasInput inputBinding="text"></ng-template>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.attributes[1];
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
expect(consumer.name).toBe('HasInput');
});

it('should bind to the encompassing node when no directive input is matched', () => {
const template = parseTemplate('<span dir></span>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.attributes[0];
const consumer = res.getConsumerOfBinding(attr);
expect(consumer).toEqual(el);
});
});

describe('matching outputs to consuming directives', () => {
it('should work for bound events', () => {
const template =
parseTemplate('<div hasOutput (outputBinding)="myHandler($event)"></div>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.outputs[0];
const consumer = res.getConsumerOfBinding(attr) as DirectiveMeta;
expect(consumer.name).toBe('HasOutput');
});

it('should bind to the encompassing node when no directive output is matched', () => {
const template = parseTemplate('<span dir (fakeOutput)="myHandler($event)"></span>', '', {});
const binder = new R3TargetBinder(makeSelectorMatcher());
const res = binder.bind({template: template.nodes});
const el = template.nodes[0] as a.Element;
const attr = el.outputs[0];
const consumer = res.getConsumerOfBinding(attr);
expect(consumer).toEqual(el);
});
});
});

0 comments on commit fde5067

Please sign in to comment.
You can’t perform that action at this time.