2

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

<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 保持可见。有人可以就此提出建议吗？

4

4 回答 4

2

如果您console.log的控制器中有，请摆脱它。它有助于让事情在 IE8 中工作，例如 ng-hide

于 2014-03-27T22:40:07.767 回答
1

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

于 2013-02-25T16:31:00.740 回答
0

这是一个完全可用的 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>

于 2016-02-29T21:16:34.443 回答
0

我遇到了同样的问题，即ng-show不能在 Internet Explorer 中工作。

官方 ngShow AngularJS 文档提到了这一点，并为此提供了一些解决方法。

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

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

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

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

  • 禁用受影响元素上的动画。
  • 使用ngIforngSwitch代替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>
于 2021-03-08T14:44:10.143 回答