1

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)?

Edward Graham
  • 13
  • 3
  • 1
    Can you provide more context? I'm not sure I understand the syntax of the code you have pasted. It looks like a template literal of a function call, but the parameters are not seperated by commas and the there is no string delimiter, and typically, JS functions are not named with dashes. So confused. – Pop-A-Stash Jun 20 '19 at 16:09
  • Ahh! Jade. Now it makes sense. Thank you for adding that to your question. Also tagging your question with `pug` which is what Jade is now called – Pop-A-Stash Jun 20 '19 at 17:10
  • Thanks! It's my first question on SO and we work entirely with `pug` (this one file is still named ng.jade for some reason, I thought that might be a contributing factor) so I didn't think to add that. – Edward Graham Jun 20 '19 at 17:15

1 Answers1

0

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.

Community
  • 1
  • 1
Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
  • Thanks, this is exactly my issue. Oddly enough, when I changed the filetype from ng.jade to .pug it works just fine without the single quotes. It's possible we're doing something else to avoid this problem that I'm not aware of. – Edward Graham Jun 20 '19 at 17:28