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

fix(animations): change trigger binding syntax to function as a property binding []

Browse Source 
Animation triggers can now be set via template bindings `[]`

BREAKING CHANGE:

animation trigger expressions within the template that are assigned as
an element attribute (e.g. `@prop`) are deprecated. Please use the
Angular2 property binding syntax (e.g. `[@prop]`) when assigning
properties.

```ts
// this is now deprecated
<div @trigger="expression"></div>

// do this instead
<div [@trigger]="expression"></div>
```
This commit is contained in:
Matias Niemelä
2016-07-07 12:13:52 -07:00
parent f1fc1dc669
commit 7f4954bed6
7 changed files with 79 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
modules/@angular/compiler/src/template_parser.ts
View File

@ -466,8 +466,9 @@ class TemplateParseVisitor implements HtmlAstVisitor {
if (isPresent(bindParts)) {
hasBinding = true;
if (isPresent(bindParts[1])) { // match: bind-prop
this._parseProperty(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
this._parsePropertyOrAnimation(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
targetAnimationProps);
} else if (isPresent(bindParts[2])) { // match: var-name / var-name="iden"
var identifier = bindParts[8];
@ -500,23 +501,31 @@ class TemplateParseVisitor implements HtmlAstVisitor {
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
} else if (isPresent(bindParts[6])) { // match: bindon-prop
this._parseProperty(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
this._parsePropertyOrAnimation(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
targetAnimationProps);
this._parseAssignmentEvent(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
} else if (isPresent(bindParts[7])) { // match: animate-name
if (attrName[0] == '@' && isPresent(attrValue) && attrValue.length > 0) {
this._reportError(
`Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use [@prop]="exp" instead!`,
attr.sourceSpan, ParseErrorLevel.WARNING);
}
this._parseAnimation(
bindParts[8], attrValue, attr.sourceSpan, targetMatchableAttrs, targetAnimationProps);
} else if (isPresent(bindParts[9])) { // match: [(expr)]
this._parseProperty(
bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
this._parsePropertyOrAnimation(
bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
targetAnimationProps);
this._parseAssignmentEvent(
bindParts[9], attrValue, attr.sourceSpan, targetMatchableAttrs, targetEvents);
} else if (isPresent(bindParts[10])) { // match: [expr]
this._parseProperty(
bindParts[10], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps);
this._parsePropertyOrAnimation(
bindParts[10], attrValue, attr.sourceSpan, targetMatchableAttrs, targetProps,
targetAnimationProps);
} else if (isPresent(bindParts[11])) { // match: (event)
this._parseEvent(
@ -555,12 +564,18 @@ class TemplateParseVisitor implements HtmlAstVisitor {
targetRefs.push(new ElementOrDirectiveRef(identifier, value, sourceSpan));
}
private _parseProperty(
private _parsePropertyOrAnimation(
name: string, expression: string, sourceSpan: ParseSourceSpan,
targetMatchableAttrs: string[][], targetProps: BoundElementOrDirectiveProperty[]) {
this._parsePropertyAst(
name, this._parseBinding(expression, sourceSpan), sourceSpan, targetMatchableAttrs,
targetProps);
targetMatchableAttrs: string[][], targetProps: BoundElementOrDirectiveProperty[],
targetAnimationProps: BoundElementPropertyAst[]) {
if (name[0] == '@') {
this._parseAnimation(
name.substr(1), expression, sourceSpan, targetMatchableAttrs, targetAnimationProps);
} else {
this._parsePropertyAst(
name, this._parseBinding(expression, sourceSpan), sourceSpan, targetMatchableAttrs,
targetProps);
}
}
private _parseAnimation(

28
modules/@angular/compiler/test/template_parser_spec.ts
View File

@ -282,6 +282,34 @@ export function main() {
[BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null]
]);
});
it('should parse bound properties via @ and not report them as attributes and also report a deprecation warning',
() => {
expect(humanizeTplAst(parse('<div @something="value2">', []))).toEqual([
[ElementAst, 'div'],
[
BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null
]
]);
expect(console.warnings).toEqual([[
'Template parse warnings:',
`Assigning animation triggers via @prop="exp" attributes with an expression is deprecated. Use [@prop]="exp" instead! ("<div [ERROR ->]@something="value2">"): TestComp@0:5`
].join('\n')]);
});
it('should not issue a warning when an animation property is bound without an expression',
() => {
humanizeTplAst(parse('<div @something>', []));
expect(console.warnings.length).toEqual(0);
});
it('should parse bound properties via [@] and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div [@something]="value2">', []))).toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null]
]);
});
});
describe('events', () => {