ngStyle ignores properties with underscore only when jQuery is installed

[websirnik]

Default expected behaviour:

• ng-style="{background_color:'blue'}" translates to style="background-color: blue"
• ng-style="{backgroundColor:'blue'}" translates to style="background-color: blue"
• in Plunker(no jQuery): http://plnkr.co/edit/lCBUkbKeqLxtkTpHx0bo?p=preview

When jQuery is installed, the first declaration via undescope is ignored, the output is the following:

• ng-style="{background_color:'blue'}" translates to nothing
• ng-style="{backgroundColor:'blue'}" translates to style="background-color: blue"
• in Plunker(with jQuery): http://plnkr.co/edit/G13qq3ReaMprVnI8p7sv?p=preview

Is there a workaround that would enable properties with underscore to be processed?

[caitp]

no

[caitp]

Actually, it looks like angular will translate underscores to uppercaes in camelCase(), but that's not something jquery does, afaik

[websirnik]

@caitp at what stage does jQuery interfere with Angular on this?

[caitp]

jQuery will replace angular's jqLite if it's loaded before angular (see bindJquery in src/Angular.js) --- so we use their css() method instead of ours, which uses their camelCase() method, which doesn't replace underscores, even though ours does for some reason.

[mgol]

@caitp

jQuery will replace angular's jqLite if it's loaded before angular (see bindJquery in src/Angular.js) --- so we use their css() method instead of ours, which uses their camelCase() method, which doesn't replace underscores, even though ours does for some reason.

Maybe jqLite should be modified here to match jQuery?

[caitp]

I expect we should, @mzgol --- but maybe we had a good reason for this behaviour at some point

[websirnik]

My use case is:

• All my js_variables_have_underscore_syntax.
• I have css_styles = {'background_color: '#fff', ...} object that represents CSS properties (we persist it to DB)
• I'm passing this object straight to ng-style="css_styles"

Right now(with jQuery) I need a data-transformer:
{'background_color: '#fff', ...} -> {'backgroundColor: '#fff', ...}

Would like ng-style={'background_color: '#fff', ...} option to be available, since we are getting rid of jQuery.

[mgol]

@websirnik I get it but there are infinite possible scenarios and it's impossible to cover them all. On the other hand, every divergence between jQuery & jqLite is a pain for users switching in either direction so unless it saves size in jqLite, matching jQuery behavior is preferred.

[mgol]

We'll align jqLite with jQuery here in Angular 1.6.