search

angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.81k stars 27.49k forks source link

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

Closed ghost closed 10 years ago

ghost commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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" notifications@github.com 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/angular/angular.js/issues/4974#issuecomment-28647899 .

scottywakefield commented 10 years ago

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

j-walker23 commented 10 years ago

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 commented 10 years ago

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

j-walker23 commented 10 years ago

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 commented 10 years ago

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

lelis718 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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 commented 10 years ago

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

<div class="red" ng-class="{coolClass: pieHover || appTab.Pies}" ng-mouseenter="pieHover = true" ng-mouseleave="pieHover = false"> </div>

Where $scope.appTab.Pies is another boolean.

Thanks again.

lelis718 commented 10 years ago

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 commented 10 years ago 
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 commented 10 years ago

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 commented 10 years ago

@wurongle You are my hero!