Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ngStyle ignores properties with underscore only when jQuery is installed #7744

Closed
websirnik opened this issue Jun 8, 2014 · 10 comments
Closed

ngStyle ignores properties with underscore only when jQuery is installed #7744

websirnik opened this issue Jun 8, 2014 · 10 comments
Labels
component: jqLite frequency: low severity: inconvenient
Milestone
Backlog - won't fix

Comments

@websirnik
Copy link

Default expected behaviour:

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

Is there a workaround that would enable properties with underscore to be processed?
@caitp
Copy link
Contributor

caitp commented Jun 8, 2014

no

@caitp
Copy link
Contributor

caitp commented Jun 8, 2014

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

@websirnik
Copy link
Author

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

@caitp
Copy link
Contributor

caitp commented Jun 8, 2014

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.

@Narretz Narretz added this to the Backlog milestone Jul 2, 2014
@mgol
Copy link
Member

mgol commented Aug 1, 2014

@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
Copy link
Contributor

caitp commented Aug 1, 2014

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

@websirnik
Copy link
Author

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
Copy link
Member

mgol commented Aug 1, 2014

@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.

@btford btford removed the gh: issue label Aug 20, 2014
@mgol
Copy link
Member

mgol commented Oct 10, 2016

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

@mgol mgol changed the title ngStyle ignores properties with underscore when jQuery is installed ngStyle ignores properties with underscore only when jQuery is installed Oct 12, 2016
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
7392203 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744
@mgol mgol mentioned this issue Oct 12, 2016
Closed
3 tasks
@mgol
Copy link
Member

mgol commented Oct 12, 2016

PR to align with jQuery: #15249.

mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
2c70cca 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
705eba2 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
008baa9 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744

BREAKING CHANGE: before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.

To migrate the code follow the example below:

Before:

HTML:

<div ng-style={background_color: 'blue'}></div>
<div ng-style={'background:color': 'blue'}></div>
<div ng-style={'background--color': 'blue'}></div>

JS:

elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background--color', 'blue');

var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background--color');

After:

HTML:

<div ng-style={'background-color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');

var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
99b2dde 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744

BREAKING CHANGE: before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.

If you use Angular with jQuery, it already behaved in this way so no changes
are needed on your part.

To migrate the code follow the example below:

Before:

HTML:

<div ng-style={background_color: 'blue'}></div>
<div ng-style={'background:color': 'blue'}></div>
<div ng-style={'background--color': 'blue'}></div>

JS:

elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background--color', 'blue');

var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background--color');

After:

HTML:

<div ng-style={'background-color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');

var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
refactor(*): separate jqLite/compile/sce camelCasing logic
273e9b0 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744

BREAKING CHANGE: before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.

If you use Angular with jQuery, it already behaved in this way so no changes
are needed on your part.

To migrate the code follow the example below:

Before:

HTML:

// All five versions used to be equivalent.
<div ng-style={background_color: 'blue'}></div>
<div ng-style={'background:color': 'blue'}></div>
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={'background--color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// All five versions used to be equivalent.
elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background-color', 'blue');
elem.css('background--color', 'blue');
elem.css('backgroundColor', 'blue');

// All five versions used to be equivalent.
var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background-color');
var bgColor = elem.css('background--color');
var bgColor = elem.css('backgroundColor');

After:

HTML:

// Previous five versions are no longer equivalent but these two still are.
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// Previous five versions are no longer equivalent but these two still are.
elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');

// Previous five versions are no longer equivalent but these two still are.
var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
mgol added a commit to mgol/angular.js that referenced this issue Oct 12, 2016
@mgol
fix(jqLite): separate jqLite/compile/sce camelCasing logic
b9c338d 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

This commit separates jqLite camelCasing from the $compile one (and $sce but
that's an internal-only use). The $compile version should behave as before.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

Ref angular#15126
Fix angular#7744

BREAKING CHANGE: before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.

If you use Angular with jQuery, it already behaved in this way so no changes
are needed on your part.

To migrate the code follow the example below:

Before:

HTML:

// All five versions used to be equivalent.
<div ng-style={background_color: 'blue'}></div>
<div ng-style={'background:color': 'blue'}></div>
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={'background--color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// All five versions used to be equivalent.
elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background-color', 'blue');
elem.css('background--color', 'blue');
elem.css('backgroundColor', 'blue');

// All five versions used to be equivalent.
var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background-color');
var bgColor = elem.css('background--color');
var bgColor = elem.css('backgroundColor');

After:

HTML:

// Previous five versions are no longer equivalent but these two still are.
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// Previous five versions are no longer equivalent but these two still are.
elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');

// Previous five versions are no longer equivalent but these two still are.
var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
@petebacondarwin petebacondarwin modified the milestones: Backlog, 1.6.0-rc.0 Oct 13, 2016
ellimist pushed a commit to ellimist/angular.js that referenced this issue Mar 15, 2017
@mgol @ellimist
fix(jqLite): align jqLite camelCasing logic with JQuery
d40d193 
jqLite needs camelCase for it's css method; it should only convert one dash
followed by a lowercase letter to an uppercase one; it shouldn't touch
underscores, colons or collapse multiple dashes into one. This is behavior
of jQuery 3 as well.

Also, jqLite's css camelCasing logic was put in a separate function and
refactored: now the properties starting from an uppercase letter are used by
default (i.e. Webkit, not webkit) and the only exception is for the -ms- prefix
that is converted to ms, not Ms. This makes the logic clearer as we're just
always changing a dash followed by a lowercase letter by an uppercase one; this
is also how it works in jQuery.

The camelCasing for the $compile and $sce services retains the previous behaviour.

Ref angular#15126
Fix angular#7744

BREAKING CHANGE: before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.

If you use Angular with jQuery, it already behaved in this way so no changes
are needed on your part.

To migrate the code follow the example below:

Before:

HTML:

// All five versions used to be equivalent.
<div ng-style={background_color: 'blue'}></div>
<div ng-style={'background:color': 'blue'}></div>
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={'background--color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// All five versions used to be equivalent.
elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background-color', 'blue');
elem.css('background--color', 'blue');
elem.css('backgroundColor', 'blue');

// All five versions used to be equivalent.
var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background-color');
var bgColor = elem.css('background--color');
var bgColor = elem.css('backgroundColor');

After:

HTML:

// Previous five versions are no longer equivalent but these two still are.
<div ng-style={'background-color': 'blue'}></div>
<div ng-style={backgroundColor: 'blue'}></div>

JS:

// Previous five versions are no longer equivalent but these two still are.
elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');

// Previous five versions are no longer equivalent but these two still are.
var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: jqLite frequency: low severity: inconvenient
Projects
None yet
Milestone
Backlog - won't fix
Development

Successfully merging a pull request may close this issue.

refactor(*): separate jqLite/compile/sce camelCasing logic mgol/angular.js
6 participants
@petebacondarwin @websirnik @btford @Narretz @mgol @caitp