AngularJS：为什么 ng-show 不能在 IE11 上运行？答案

【问题标题】：AngularJS : Why ng-show is not working on IE11?AngularJS：为什么 ng-show 不能在 IE11 上运行？
【发布时间】：2016-08-03 13:57:39
【问题描述】：

在我的代码中，ng-show 在 Firefox 而不是 IE 11 上运行良好。

<div ng-show="isExist" class="panel panel-default">

在控制器中

$scope.isExist = false;

if(user.name)
{
   $scope.isExist = true;

}

我得到 $scope.isExist 为 false 并且 Div 在 ff/chrome 上隐藏，但在 ie11 上没有。

【问题讨论】：

您是否进行了任何调试以确认user.name 和$scope.isExists 是您所期望的所有三种浏览器中的内容？（需要包含在您的问题中）
您检查过 IE 开发者工具中的错误吗？ user.name 的值正确吗？
@KevinB ，我已经在所有三个浏览器上进行了调试，我得到 $scope.isExist 的最终值为 false。但是 IE11 在使用 ng-show 时表现不同。
@RicardoPontual 是的，我已经使用 IE 浏览器的开发工具进行了调试，并且与其他浏览器开发工具的值一样，isExist 的值为 false。 div 在 FF 或 Chrome 上被隐藏。

标签： javascript angularjs html css angularjs-directive

【解决方案1】：

这确实是一个 CSS 问题。 ng-show 将 .ng-hide 类添加到元素中。仔细检查您的面板和面板默认类，以确保没有任何内容覆盖样式。

或者删除您的面板和面板默认类，它会起作用。

【讨论】：

ng-show 是一个指令，这与 css 无关。问题在于 isExist 的值
来自docs.angularjs.org/api/ng/directive/ngShow：ngShow 指令根据提供给 ngShow 属性的表达式显示或隐藏给定的 HTML 元素。通过在元素上移除或添加 .ng-hide CSS 类来显示或隐藏元素。
这可能是因为对我来说 ng-hide 类也适用于 ng-hide 条件，但可能是由于某些父类无法正常工作

【解决方案2】：

对不起各位。它的行为很奇怪。现在它开始正常工作了。我很确定这不是缓存问题，因为我已经清除了很多次。不知道出了什么问题。现在工作正常。感谢您的帮助。

【讨论】：

因为 IE11 很烂

【解决方案3】：

我遇到了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 ng-if="isExist" class="panel panel-default">

【讨论】：