Angular ng-show 在 IE7/8 中不起作用答案

【问题标题】：Angular ng-show not working in IE7/8Angular ng-show 在 IE7/8 中不起作用
【发布时间】：2021-03-08 23:06:49
【问题描述】：

我正在尝试根据 AJAX 调用完成的时间，使用 ng-show 在 $scope 中使用布尔值有条件地显示/隐藏两个 div。基本上，具有以下布局：

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

引发变化的函数包含以下内容：

$scope.loadingData=true;

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

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

AJAX 调用运行正常，在 Chrome、Safari、Firefox 中运行良好，但不是我们需要支持的两个 IE 版本 - IE7 和 IE8。无论调用处于何种状态，加载消息都保持隐藏状态，而 div1 保持可见。有人可以就此提出建议吗？

【问题讨论】：

你能不能把{{loadingData}}，看看值是否得到更新？
你是对的，该值似乎没有被应用。进一步的调查显示了 Chrome 中的类似行为，但更为零星。为什么会这样？
也不受 $scope.$apply() 影响。

标签： css ajax internet-explorer-8 internet-explorer-7 angularjs

【解决方案1】：

如果您的控制器中有console.log，请将其删除。它有助于让事情在 IE8 中运行，例如ng-隐藏

【讨论】：

【解决方案2】：

原来这与缓存有关。 Chrome 和 IE 都在第一次调用后缓存 ajax 调用。我通过在 ajax 调用配置中引入cache:false 设法解决了 chrome 中的问题，但这在 IE 中似乎没有效果。如果有人对此有进一步的信息，请告诉我。

【讨论】：

【解决方案3】：

这是一个完整的 Angular ie7 模板。使用非常旧的 Angular，但可以工作

我的 HTML 文件 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>

【讨论】：

【解决方案4】：

我遇到了ng-show 在 Internet Explorer 中不起作用的同样问题。

official ngShow AngularJS documentation 提到了这一点，并为此提供了一些解决方法。

（我将复制粘贴该链接中提到的文字，以防该链接已过期或由于某种原因无法使用）

当使用ngShow 和/或ngHide 在元素之间切换时，它可能会发生要显示的元素和要隐藏的元素都是在很短的时间内可见。

这通常发生在包含 ngAnimate 模块时，但没有实际动画是为ngShow / ngHide 定义的。互联网 Explorer 比其他浏览器更容易受到影响。

有几种方法可以缓解这个问题：

在受影响的元素上禁用动画。

使用ngIf 或ngSwitch 代替ngShow / ngHide。

使用特殊的 CSS 选择器 ng-hide.ng-hide-animate 在受影响的元素上设置 {display: none} 或类似名称。

使用ng-class="{'ng-hide': expression} 代替ngShow / ngHide。

在受影响的元素上定义动画。

第二个建议（将ng-show 替换为ng-if）对我有用。所以在你的情况下，你可以考虑使用这个 -

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

【讨论】：