*directive not parsing correctly

See example: http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=info

Both of these should parse correctly:

<div *bsPane="title exp"></div>
<div *bsPane="title: exp"></div>

Given:

@Directive({
  selector: '[bsPane]'
})
class Foo {
  @Input() bsPaneTitle: string;
}

instead get error:

Can't bind to 'bsPane' since it isn't a known native property ("
    Demo:
    <div [ERROR ->]*bsPane="title 'Overview'"></div>
    <div *bsPane="title 'Summary'"></div>"): DiDemo@2:9
Property binding bsPane not used by any directive on an embedded template ("
    Demo:
    [ERROR ->]<div *bsPane="title 'Overview'"></div>
    <div *bsPane="title 'Summary'"></div>"): DiDemo@2:4
Can't bind to 'bsPane' since it isn't a known native property ("
    Demo:
    <div *bsPane="title 'Overview'"></div>
    <div [ERROR ->]*bsPane="title 'Summary'"></div>"): DiDemo@3:9
Property binding bsPane not used by any directive on an embedded template ("
    Demo:
    <div *bsPane="title 'Overview'"></div>
    [ERROR ->]<div *bsPane="title 'Summary'"></div>"): DiDemo@3:4```

and

EXCEPTION: Template parse errors:
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Overview'] in DiDemo@2:9 ("
    Demo:
    <div [ERROR ->]*bsPane="title: 'Overview'"></div>
    <div *bsPane="title: 'Summary'"></div>"): DiDemo@2:9
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: 'Summary'] in DiDemo@3:9 ("
    Demo:
    <div *bsPane="title: 'Overview'"></div>
    <div [ERROR ->]*bsPane="title: 'Summary'"></div>"): DiDemo@3:9

[awerlang]

I’d like to expand on my previous comment.

There’s 2 separate issues here:

1. Can’t bind to ‘bsPane’ since it isn’t a known native property
2. Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [bsPane title: ‘Overview’]

PR #12841 fixes (1) but prevents <div *bsPane="title exp"></div>; also fixes (2).

Desugaring

Desugaring from * notation to template attribute is done before input string is tokenized. It prepends the attribute’s name followed by a space, then it tokenizes & parses. At this moment there’s no information about directives possibly being matched. I don’t see how it would properly add an “;” or “:” to it instead of a space at this step, with the goal of removing ambiguity in the grammar.

Support for optional “:” everywhere

I propose this revised grammar:

1. The language is composed of a series of tuples
2. Every tuple contains 2 components 2.a) Alternatively, a tuple might be composed of a single component, a key, given that any of these is true: 2.a.i) It is the first tuple 2.a.ii) It is the last tuple 2.a.iii) It is succeded by a “;” character
3. Each first component of the tuple is a key
4. Each second component of the tuple is an expression
5. The second component is optionally preceded by a “:” character
6. The tuple is optionally succeded by a “;” character

Item 2.a.iii is there to remove ambiguity. If we permit any tuple, then I don’t see how it would be feasible to parse.

Some things to note / assumptions:

• I’ve left assignment out because it doesn’t present any challenge to parse;
• Optional delimiters “:” and “;” exists to support a more fluent language;
• More than one tuple composed of a single component (key) is useful to narrow down matching of elements to directives.

Valid input:

key key exp
key key: exp
key; key
key; key exp key

Invalid input:

key key key
key key key exp
key key exp key key: exp
key: key exp

@mhevery I’d like to know your thoughts about this. If you agree I can proceed with a PR.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}