I have a downgraded angular 2 component that works fine in an AngularJS component until I remove the single quotation marks around the component's second property.
EDIT: This filetype this component is used in is ng.jade .
This works:
user-score-component(
[rating-score]="user.ratingScore"
'[form-is-disabled]'="false"
'(on-change)'="onRatingScoreChange($event)"
)
This doesn't:
user-score-component(
[rating-score]="user.ratingScore"
[form-is-disabled]="false"
'(on-change)'="onRatingScoreChange($event)"
)
In the second example, false is applied to rating-score
and form-is-disabled
is undefined. I am fine leaving the single quotes around form-is-disabled
but after some research on hybrid apps I haven't been able to figure out what the single quotes are doing here.
Why are they needed on the second property (form-is-disabled
) but not the first (rating-score
)?
There is mention of this on github in Pug's issue tracker: https://github.com/pugjs/pug/issues/2050
This is a difficult case to solve. For example:
input(foo='foo' [bar]='bar') //- since 'foo' [bar] is equivalent to 'foo'[bar] input(foo='foo'[bar]='bar') //- which is equivalent to input(foo=('foo'[bar]='bar')) //- which is equivalent to input(foo='bar') input([foo]='foo' (bar)='bar') input(foo='foo'(bar)='bar') input(foo=('foo'(bar)='bar')) //- 'foo'(bar)='bar → assigning to rvalue ?
A work around you can use is quoting the attribute names:
input('[foo]'='foo' '[bar]'='bar') input('[foo]'='foo' '(bar)'='bar')
Since the bug is impossible to fix and a logical work around exists, I'm going to close this issue now.