ngClass not rendering correctly in Internet Explorer 7 when $sceProvider.enabled(false); #4974

ghost · 2013-11-15T16:39:16Z

Hi there. I think there might be a issue with Internet Explorer 7. (Fine in 10,9,and 8)

I have set: $sceProvider.enabled(false); and have the correct doc type: <!doctype html>

The problem seems to be that the ng-class directive is not rendering the class styles onto the div correctly. The class ('classname') gets injected into the markup, however the browser fails to parse and repaint the new added styles of 'classname'.

The problem affects > 1.2.0rc1 including current 1.2.0

Tried everything! I'm convinced its do with with $sce somewhere ?

nosideeffects · 2013-11-15T17:29:24Z

Could be a number of reasons this breaks in IE7, most likely changes to jqLite. However, IE7 is not supported or tested against.

If you absolutely require IE7 support your best luck is using an older version of Angular that coincidentally works with old IE!

ghost · 2013-11-17T12:50:14Z

Thanks for the reply. I'm really struggling to find in black and white weather angular doesn't work on Internet Explorer 7. http://docs.angularjs.org/guide/ie makes reference to running on IE v8.0 or earlier. If seemed OK until I upgraded to the latest version. IE7 is a deal breaker for this particular task unfortunately.

petebacondarwin · 2013-11-17T13:54:32Z

The project currently supports and will attempt to fix bugs for IE8 and
above. The continuous integration server runs all the tests against IE8.
See http://ci.angularjs.org.

IE7 and below are not officially supported but a subset of the AngularJS
functionality may work. It is up to you to test and decide whether the
project works for your particular app.

It is very unlikely that issues specific to IE7 will be given any time by
the core team.
On 17 Nov 2013 12:50, "ReSRC" [email protected] wrote:

Thanks for the reply. I'm really struggling to find in black and white
weather angular doesn't work on Internet Explorer 7.
http://docs.angularjs.org/guide/ie makes reference to running on IE v8.0
or earlier. If seemed OK until I upgraded to the latest version. IE7 is a
deal breaker for this particular task unfortunately.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4974#issuecomment-28647899
.

scottywakefield · 2013-11-21T14:17:08Z

@petebacondarwin - could you please update http://docs.angularjs.org/guide/ie with your comment as I think this will send a much clearer message than what is currently there. There are other issues with IE7 and ng 1.2.x including ngRepeat, ngHide, ngShow, ngIf, expressions in ngClass and now this. These are just the ones I have come across in the last few days. I would be very surprised if that was the complete list.

Added text from angular#4974 where petedarwinbacon responded to an IE7 issue.

Added text from #4974 Closes #5070

j-walker23 · 2013-12-17T10:57:13Z

I thank the gods every day i do not have to support ie7. This was only a month ago, i feel bad for him, my condolences.

scottywakefield · 2013-12-17T11:14:01Z

@j-walker23 - no end of IE7 until at least mid 2014, maybe later. Craziness.

j-walker23 · 2013-12-17T11:20:00Z

Very sad, i contemplate another career any time i am told i have to support ie7 when i am just about done with the app.

reqshark · 2014-01-05T08:35:02Z

https://code.google.com/p/chromeframeiebar/

Added text from angular#4974 Closes angular#5070

lelis718 · 2014-03-15T03:55:12Z

I thing i´ve made a fix for this little anoying bug..
I´ve created a directive that checks and perform an update in the element´s class attribute

here it is (use it IE7 only to overcome performance issues)

    //(use it IE7 only to overcome performance issues)
    myApp.directive('ngClassFix', function($parse){
        return {
            restrict:'A',
             scope: true,       
            link: function(scope, element, attrs){

                var str = attrs["ngClass"];
                scope.$parent.$watch(function(){
                    var output = null;
                    output = $parse(str)(scope);
                    return output;
                },function(newValue, oldValue){
                    //alert(newValue);
                    angular.element(element).removeClass(oldValue).addClass(newValue).addClass('ng-scope');
                });
            }
        }
    });

and then in element you have to use

<div ng-class="myexpression" ng-class-fix></div>

hope it helps anyone ;)

llozano · 2014-04-01T13:38:56Z

@lelis718 thanks for doing this. In IE7 I'm getting the error: 10 $digest() iterations reached. Aborting!.
Did you perhaps solve this issue in a different way?

lelis718 · 2014-04-01T16:00:13Z

Hello @llozano ,
I didn´t got this error
I think is because I didn´t test the "ng-class-fix" attribute with some complex functions, maybe if you post your code here we can think in a workaround.

llozano · 2014-04-01T21:11:46Z

Hi @lelis718, I'm using an angular expression. Here is an example

`

Where $scope.appTab.Pies is another boolean.

Thanks again.

lelis718 · 2014-04-03T00:11:25Z

Helo @llozano try to encapsulate this ng-class expression in a function of your scope see if that works

Something like

<div class="red" ng-class="getCoolClass()" ng-mouseenter="..." ng-mouseleave="..."></div>

And then in scope you define getCoolClass
Hope it helps.

michalliu · 2014-07-15T18:13:49Z

I have set: $sceProvider.enabled(false); and have the correct doc type: <!doctype html>
The problem seems to be that the ng-class directive is not rendering the class styles onto the div correctly. The class ('classname') gets injected into the markup, however the browser fails to parse and repaint the new added styles of 'classname'.

Same issue here. I've found an answer at stackoverflow for this issue which link back to #3633

// The minimum bar for $sce is IE8 in standards mode.
// IE7 standards mode is not supported.
// If you must support IE7, you should disable $sce completely.

Now, I have to put

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->

as the first child element in <head>. Partially solved the problem for IE 8,9,10 at compatible mode.

wurongle · 2014-10-17T03:27:36Z

i also have this problem.
the reason why it didn't work beacase angular(version 1.2.25) code use " setAttribute('class','xx') ", not " setAttribute('className','xx') " or " el.className='xx' ".

http://stackoverflow.com/questions/22958807/angular-not-working-in-ie8-document-mode-7

michalliu · 2014-10-17T18:19:25Z

@wurongle You are my hero!

Added text from angular/angular.js#4974 Closes #5070

ghost closed this as completed Nov 18, 2013

scottywakefield added a commit to scottywakefield/angular.js that referenced this issue Nov 21, 2013

Update ie.ngdoc

6a16bb2

Added text from angular#4974 where petedarwinbacon responded to an IE7 issue.

scottywakefield mentioned this issue Nov 21, 2013

Update ie.ngdoc #5070

Closed

petebacondarwin pushed a commit that referenced this issue Nov 21, 2013

docs(guide/ie): add info about what IE versions are supported

6b5772b

Added text from #4974 Closes #5070

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

docs(guide/ie): add info about what IE versions are supported

4151ac2

Added text from angular#4974 Closes angular#5070

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

docs(guide/ie): add info about what IE versions are supported

6fc703d

Added text from angular#4974 Closes angular#5070

mcalthrop mentioned this issue Apr 29, 2014

Works with IE7? McNull/angular-block-ui#10

Closed

ammula88 pushed a commit to ammula88/angular.js that referenced this issue Feb 18, 2016

docs(guide/ie): add info about what IE versions are supported

5dcb99f

Added text from angular/angular.js#4974 Closes #5070

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ngClass not rendering correctly in Internet Explorer 7 when $sceProvider.enabled(false); #4974

ngClass not rendering correctly in Internet Explorer 7 when $sceProvider.enabled(false); #4974

ghost commented Nov 15, 2013

nosideeffects commented Nov 15, 2013

ghost commented Nov 17, 2013

petebacondarwin commented Nov 17, 2013

scottywakefield commented Nov 21, 2013

j-walker23 commented Dec 17, 2013

scottywakefield commented Dec 17, 2013

j-walker23 commented Dec 17, 2013

reqshark commented Jan 5, 2014

lelis718 commented Mar 15, 2014

llozano commented Apr 1, 2014

lelis718 commented Apr 1, 2014

llozano commented Apr 1, 2014

lelis718 commented Apr 3, 2014

michalliu commented Jul 15, 2014

wurongle commented Oct 17, 2014

michalliu commented Oct 17, 2014

ngClass not rendering correctly in Internet Explorer 7 when $sceProvider.enabled(false); #4974

ngClass not rendering correctly in Internet Explorer 7 when $sceProvider.enabled(false); #4974

Comments

ghost commented Nov 15, 2013

nosideeffects commented Nov 15, 2013

ghost commented Nov 17, 2013

petebacondarwin commented Nov 17, 2013

scottywakefield commented Nov 21, 2013

j-walker23 commented Dec 17, 2013

scottywakefield commented Dec 17, 2013

j-walker23 commented Dec 17, 2013

reqshark commented Jan 5, 2014

lelis718 commented Mar 15, 2014

llozano commented Apr 1, 2014

lelis718 commented Apr 1, 2014

llozano commented Apr 1, 2014

lelis718 commented Apr 3, 2014

michalliu commented Jul 15, 2014

wurongle commented Oct 17, 2014

michalliu commented Oct 17, 2014