ngClass bug with ng:class and ng:click on one element

[sja]

If you have ngClass and ngClick directive on one element and write them as ng:class=... and ng:click=..., the class attribute will always be empty.

Example: http://plnkr.co/edit/t66oOw

[btford]

I see the plunker is entitled "IE bug." What version of IE?

[sja]

It's IE9.
IE8 and IE10 work.
By the way: You cannot use plunker itself to test, because it won't load in IE9. You have to put the downloadable ZIP-Contant in a served folder and load it from there. The reason behind are the IE Security Zones which are a bit strange on local files (IE will ask you to allow execution of ActiveX-Scripts, which seems to be Angular because I linked the CDN-URL).
Update: This would be easier for you: http://jnzn.de/plunk-t66oOw/ :-)

[IgorMinar]

@wesleycho would you like to take a look at this one?

[wesleycho]

Sure, I can take a stab at it.

[caitp]

BTW: just testing this on SL, I can make the original plunker work by not using the XML namespace-style notation, but instead ng-class / ng-click / ng-app.

Could be that the namespace-style just breaks it?

[btford]

Could be that the namespace-style just breaks it?

yes. the namespace seems to affect the presence of getAttribute/setAttribute

[caitp]

http://jsbin.com/mihularemobu/1/edit in SL / IE9, typeof setAttribute and getAttribute are function regardless of whether a namespaced attribute is used --- it's probably just the behaviour ofthe functions that break.

I don't think there's much we can do about that though, unless we come up with some hack that uses the attributes collection instead (but this is probably not a great idea) --- for performance in non-SVG cases we could just use className though.

[caitp]

mmmyep

[btford]

sorry, misspoke. seems like just the visual behavior of setAttribute('class', ...) is broken when elements' attributes use the ng: namespace.

[btford]

Because this is such an edge case and the fix would have perf implications, I think we're going to close this as "won't fix"

[caitp]

So, we aren't gonna land the class API fix, too much code, but if you need it, you can monkeypatch with a strategy similar to the one listed there --- you probably don't want to monkeypatch but just patch angular itself, so that ngAnimate can make use of it.

[caitp]

So take a look at https://github.com/angular/angular.js/pull/9510.patch (you can build angular with it with curl https://github.com/angular/angular.js/pull/9510.patch | git am, grunt build) --- if you need this for IE9