Angular 1.2.0 ng-hide/ng-show not working correctly in IE7

[omarqureshi]

Was working in 1.0.8 - a small snippet of offending code

<td>
  <a class='deactivate' href='#' ng-click='activationToggle(user)' ng-show='user.deactivated_at'>Reactivate</a>
  <a class='deactivate' href='#' ng-click='activationToggle(user)' ng-hide='user.deactivated_at'>Deactivate</a>
  <br>
  <a href="#" class="settings" ng-click="editServiceUser(user)">Edit Settings</a>
</td>

Generated source (via IE developer Toolbar)

<A class="deactivate" href="about:blank#" ng-click="activationToggle(user)" ng-hide="user.deactivated_at" class="" jQuery17208082390459517093="22">Deactivate<!--IE fix--></A>

Angular 1.0.8 IE7 Windows XP

Angular 1.2.0 IE7 Windows XP

Angular 1.2.0 Google Chrome Mac OS X

[omarqureshi]

More importantly, the generated source of the anchor with ng-hide

<A class="deactivate" href="about:blank#" jQuery17205074914426835889="30" ng-click="activationToggle(user)" ng-show="user.deactivated_at" class="ng-hide">Reactivate<!--IE fix--></A>

[omarqureshi]

In comparison, that very same link in Angular 1.0.8:

<A class="deactivate" href="about:blank#" ng-click="activationToggle(user)" ng-show="user.deactivated_at" jQuery17209195595246418449="30">Reactivate<!--IE fix--></A>

[omarqureshi]

So reverting ngShow / ngHide to what it was like in 1.0.8 (adding a style of display: none), fixes that problem, but introduces other problems.

Anyone who worked on the animate code willing to help out here and shed some light?

[earlyimpact]

I also experience this issue with 1.2.0. It seems to me that this version introduced several issues with IE7. I'm not sure the procedure for posting here, but I can provide any details needed to fix it.

[nosideeffects]

No official support for IE7. Can you please close to help clean up some issues?

[earlyimpact]

There is a difference between no official support and purposely not supporting. Angular has worked with IE7 all the way up to 1.2. If IE7 was purposely removed it should be in the docs. It these things are simple bugs, then they should be fixed. In ecommerce we are still viewing around 4% on IE7. Some of our customers in specific groups, such as health care, have much more on IE7.

[caitp]

If you can solve a problem for IE7, in a way which does not bloat or make unclear the changed code, and does not break supported browsers, I don't see any reason why it couldn't be merged --- and at the very least you'd have a patch you could hack in for your own uses.

I'm not in a position to merge any changes, but I think that this is not unreasonable --- if you can find a way to fix a minor bug without breaking anything or making anything too complicated, there's no good reason not to merge.

[matsko]

1.2.0+ uses a CSS class for .ng-hide, but it is injected into the body of the page at bootstrap so it might not register with IE7. Try setting that in your stylesheet and see if it works.

.ng-hide { display:none!important; }

[earlyimpact]

I'll try the class. Unfortunately, my http call does not work in IE7 with 1.2, but does in 1.0.8. So it seems something changed there too. I'll try to fix what I can and maybe it can be merged if they are small fixes.

[matsko]

This issue may be related: #4952. There is a PR within that fixes it.

[ldriscoll]

I just tried using the animate_fixes branch of matsko/angular.js, unfortunately IE7 is still ignoring the ng-hide and ng-show attributes

[scottywakefield]

Experiencing the same issues. The issue was introduced from 1.2.0-rc.2 to 1.2.0-rc.3. which is what you probably already know. Nothing obvious in the breaking changes section of the release notes.

[ldriscoll]

I believe the change in rc3 involved specific dependencies on JQLite, which is causing this issue. The ticket is #4562

[scottywakefield]

@ldriscoll - you are a legend! #4562 definitely gives some good guidance on solving this issue.

[IgorMinar]

sorry guys, I'm going to close this because we don't support IE7 and the reason why this doesn't work any more is because of c785267 which was needed to get SVG properly supported. SVG is more important than IE7 and I don't see an alternative that would just work for old IE as well as SVG without too much code bloat.

[anneravi]

use ng-class={'hidden-class': expression }