fix(compiler): support events on a template element that are consumed via a direct expression

tbosch · tbosch · commit 3118d5cebbe1 · 2015-10-26T10:45:01.000-07:00
Closes #4883
diff --git a/modules/angular2/src/core/compiler/change_definition_factory.ts b/modules/angular2/src/core/compiler/change_definition_factory.ts
@@ -58,6 +58,7 @@ class ProtoViewVisitor implements TemplateAstVisitor {
 
   visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
     this.boundElementCount++;
+    templateVisitAll(this, ast.outputs);
     for (var i = 0; i < ast.directives.length; i++) {
       ast.directives[i].visit(this, i);
     }
diff --git a/modules/angular2/src/core/compiler/template_ast.ts b/modules/angular2/src/core/compiler/template_ast.ts
@@ -77,7 +77,7 @@ export class ElementAst implements TemplateAst {
 }
 
 export class EmbeddedTemplateAst implements TemplateAst {
-  constructor(public attrs: AttrAst[], public vars: VariableAst[],
+  constructor(public attrs: AttrAst[], public outputs: BoundEventAst[], public vars: VariableAst[],
               public directives: DirectiveAst[], public children: TemplateAst[],
               public ngContentIndex: number, public sourceInfo: string) {}
   visit(visitor: TemplateAstVisitor, context: any): any {
diff --git a/modules/angular2/src/core/compiler/template_parser.ts b/modules/angular2/src/core/compiler/template_parser.ts
@@ -223,7 +223,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
       this._assertAllEventsPublishedByDirectives(directives, events, element.sourceInfo);
       this._assertNoComponentsNorElementBindingsOnTemplate(directives, elementProps,
                                                            element.sourceInfo);
-      parsedElement = new EmbeddedTemplateAst(attrs, vars, directives, children,
+      parsedElement = new EmbeddedTemplateAst(attrs, events, vars, directives, children,
                                               elementNgContentIndex, element.sourceInfo);
     } else {
       this._assertOnlyOneComponent(directives, element.sourceInfo);
@@ -241,9 +241,9 @@ class TemplateParseVisitor implements HtmlAstVisitor {
           element.name, templateElementOrDirectiveProps, templateDirectives);
       this._assertNoComponentsNorElementBindingsOnTemplate(templateDirectives, templateElementProps,
                                                            element.sourceInfo);
-      parsedElement = new EmbeddedTemplateAst([], templateVars, templateDirectives, [parsedElement],
-                                              component.findNgContentIndex(templateCssSelector),
-                                              element.sourceInfo);
+      parsedElement = new EmbeddedTemplateAst(
+          [], [], templateVars, templateDirectives, [parsedElement],
+          component.findNgContentIndex(templateCssSelector), element.sourceInfo);
     }
     return parsedElement;
   }
diff --git a/modules/angular2/test/core/compiler/change_definition_factory_spec.ts b/modules/angular2/test/core/compiler/change_definition_factory_spec.ts
@@ -90,14 +90,28 @@ export function main() {
       expect(dispatcher.log).toEqual(['textNode(null)=someValue']);
     });
 
-    it('should handle events', () => {
+    it('should handle events on regular elements', () => {
       var changeDetector = createChangeDetector('<div on-click="onEvent($event)">', [], 0);
 
       eventLocals.set('$event', 'click');
       changeDetector.handleEvent('click', 0, eventLocals);
       expect(context.eventLog).toEqual(['click']);
     });
 
+    it('should handle events on template elements', () => {
+      var dirMeta = CompileDirectiveMetadata.create({
+        type: new CompileTypeMetadata({name: 'SomeDir'}),
+        selector: 'template',
+        outputs: ['click']
+      });
+      var changeDetector =
+          createChangeDetector('<template on-click="onEvent($event)">', [dirMeta], 0);
+
+      eventLocals.set('$event', 'click');
+      changeDetector.handleEvent('click', 0, eventLocals);
+      expect(context.eventLog).toEqual(['click']);
+    });
+
     it('should handle events with targets', () => {
       var changeDetector = createChangeDetector('<div (window:click)="onEvent($event)">', [], 0);
 
diff --git a/modules/angular2/test/core/compiler/template_parser_spec.ts b/modules/angular2/test/core/compiler/template_parser_spec.ts
@@ -277,6 +277,7 @@ export function main() {
              expect(humanizeTemplateAsts(parse('<template (e)="f"></template>', [dirA])))
                  .toEqual([
                    [EmbeddedTemplateAst, 'TestComp > template:nth-child(0)'],
+                   [BoundEventAst, 'e', null, 'f', 'TestComp > template:nth-child(0)[(e)=f]'],
                    [DirectiveAst, dirA, 'TestComp > template:nth-child(0)'],
                  ]);
            });
@@ -978,6 +979,7 @@ class TemplateHumanizer implements TemplateAstVisitor {
   visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
     this.result.push([EmbeddedTemplateAst, ast.sourceInfo]);
     templateVisitAll(this, ast.attrs);
+    templateVisitAll(this, ast.outputs);
     templateVisitAll(this, ast.vars);
     templateVisitAll(this, ast.directives);
     templateVisitAll(this, ast.children);
diff --git a/modules/angular2/test/core/linker/integration_spec.ts b/modules/angular2/test/core/linker/integration_spec.ts
@@ -827,22 +827,26 @@ export function main() {
 
       it('should support events via EventEmitter on template elements',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
-           tcb.overrideView(MyComp, new ViewMetadata({
-                              template: '<template emitter listener></template>',
-                              directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
-                            }))
+           tcb.overrideView(
+                  MyComp, new ViewMetadata({
+                    template: '<template emitter listener (event)="ctxProp=$event"></template>',
+                    directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
+                  }))
 
                .createAsync(MyComp)
                .then((rootTC) => {
 
                  var tc = rootTC.debugElement.componentViewChildren[0];
                  var emitter = tc.inject(DirectiveEmitingEvent);
+                 var myComp = tc.inject(MyComp);
                  var listener = tc.inject(DirectiveListeningEvent);
 
+                 myComp.ctxProp = '';
                  expect(listener.msg).toEqual('');
 
                  ObservableWrapper.subscribe(emitter.event, (_) => {
                    expect(listener.msg).toEqual('fired !');
+                   expect(myComp.ctxProp).toEqual('fired !');
                    async.done();
                  });
 

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ class ProtoViewVisitor implements TemplateAstVisitor {`
`58`	`58`
`59`	`59`	`visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {`
`60`	`60`	`this.boundElementCount++;`
	`61`	`+ templateVisitAll(this, ast.outputs);`
`61`	`62`	`for (var i = 0; i < ast.directives.length; i++) {`
`62`	`63`	`ast.directives[i].visit(this, i);`
`63`	`64`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export class ElementAst implements TemplateAst {`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`export class EmbeddedTemplateAst implements TemplateAst {`
`80`		`- constructor(public attrs: AttrAst[], public vars: VariableAst[],`
	`80`	`+ constructor(public attrs: AttrAst[], public outputs: BoundEventAst[], public vars: VariableAst[],`
`81`	`81`	`public directives: DirectiveAst[], public children: TemplateAst[],`
`82`	`82`	`public ngContentIndex: number, public sourceInfo: string) {}`
`83`	`83`	`visit(visitor: TemplateAstVisitor, context: any): any {`