CODEWITHSUNDEEP
cssajaxinternet-explorer-8internet-explorer-7angularjs
noiselesslark
noiselesslark

Reputation: 101

Angular ng-show not working in IE7/8

I'm attempting to conditionally show/hide two divs using ng-show with a boolean value in $scope, based on when an AJAX call has completed. Basically, with the following layout:

<div id="div1" ng-show="!loadingData">
   <!--Some markup here-->
</div>
<div id="loadingMessage" ng-show="loadingData">
   Loading...
</div>

The function provoking the change contains the following:

$scope.loadingData=true;

var promise = dao.doAjaxGet("url");

promise.then(function(data){
  //Hide loading message
  $scope.loadingData=false;
});

The AJAX call is operating correctly, and this works fine in Chrome, Safari, Firefox, but not the two versions of IE that we are required to support - IE7 and IE8. The loading message stays hidden and div1 stays visible regardless of what status the call is in. Can anyone advise on this?

Upvotes: 2

Views: 3223

Answers (4)

Dhruv Saraswat
Dhruv Saraswat

Reputation: 1132

I faced this same issue of ng-show not working in Internet Explorer.

The official ngShow AngularJS documentation mentions about this, and provides a few workarounds for this.

(I'll copy-paste the text mentioned in that link, in case that link has expired or is not working for some reason)

When using ngShow and / or ngHide to toggle between elements, it can happen that both the element to show and the element to hide are visible for a very short time.

This usually happens when the ngAnimate module is included, but no actual animations are defined for ngShow / ngHide. Internet Explorer is affected more often than other browsers.

There are several way to mitigate this problem:

  • Disable animations on the affected elements.
  • Use ngIf or ngSwitch instead of ngShow / ngHide.
  • Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
  • Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
  • Define an animation on the affected elements.

The second suggestion (replacing ng-show with ng-if) worked for me. So in your case, you could consider using this -

<div id="div1" ng-if="!loadingData">
  <!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
  Loading...
</div>

Upvotes: 0

Ian Vink
Ian Vink

Reputation: 68770

Here's a fully working Angular ie7 template. Ues a very old Angular, but works

My HTML File https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>

<!--[if lte IE 8]>
    <script type="text/javascript">
        // IE7 fix   for missing  
        if (!window.console) {
            var console = {
                log: function() {},
                warn: function() {},
                error: function() {},
                time: function() {},
                timeEnd: function() {}
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>

<script>
    /**
   * Main AngularJS Web Application
   */
    var app = angular.module('myapp', []);
    app.controller('MyPageCtrl', pageController);

    function pageController($scope) {

        $scope.languages = [
            { 'Id': 1, 'Name': 'French' },
            { 'Id': 1, 'Name': 'German' },
        ];
    };

</script>
</head>
 <body ng-controller="MyPageCtrl">

<div class="col-xs-12">
    <select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
        <option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
    </select>
</div>

Upvotes: 0

pingu
pingu

Reputation: 695

If you have console.log in your controller, get rid of it. It helped to get things working in IE8 e.g. ng-hide

Upvotes: 2

noiselesslark
noiselesslark

Reputation: 101

Turns out this is caching related. Chrome and IE both cache ajax calls after the first call. I've managed to resolve the problem in chrome by introducing cache:false into the ajax call configuration but this seems to have no effect in IE. If anybody has further information on this, please let me know.

Upvotes: 1

Related Questions