428

我试图理解ng-ifand ng-show/之间的区别ng-hide，但它们在我看来是一样的。

我应该牢记选择使用其中一种吗？

4

12 回答 12

525

ngIf

该ngIf指令根据表达式删除或重新创建DOM 树的一部分。如果分配给的表达式的ngIf计算结果为假值，则从 DOM 中删除该元素，否则将该元素的克隆重新插入 DOM。

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

当使用ngIf其作用域删除元素时，将销毁该元素，并在恢复元素时创建新作用域。在其中创建的ngIf范围使用原型继承从其父范围继承。

如果ngModel用于ngIf绑定到父作用域中定义的 JavaScript 原语，则对子作用域内的变量所做的任何修改都不会影响父作用域中的值，例如

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>

要解决这种情况并从子范围内更新父范围内的模型，请使用对象：

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

或者，$parent引用父范围对象的变量：

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

该ngShow指令根据提供给属性的表达式显示或隐藏给定的 HTML 元素。ngShow通过在元素上移除或添加ng-hideCSS 类来显示或隐藏元素。CSS 类是在 AngularJS 中预定义的.ng-hide，并将显示样式设置为无（使用!important标志）。

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

当ngShow表达式计算结果为时false，ng-hideCSS 类被添加到class元素的属性中，导致它被隐藏。当 时true，ng-hideCSS 类从元素中移除，导致元素不显示为隐藏。

于 2013-10-04T09:27:49.673 回答
101

也许一个有趣的观点是两者之间的优先级之间的差异。

据我所知，ng-if 指令是所有 Angular 指令中最高（如果不是最高）优先级之一。这意味着：它将在所有其他优先级较低的指令之前先运行。它首先运行的事实意味着在处理任何内部指令之前有效地删除了该元素。或者至少：这就是我所做的。

我在为当前客户构建的 UI 中观察并使用了它。整个 UI 非常紧凑，上面有 ng-show 和 ng-hide。不再赘述，但我构建了一个通用组件，可以使用 JSON 配置对其进行管理，因此我必须在模板内部进行一些切换。存在一个 ng-repeat，在 ng-repeat 内部显示了一个表格，其中有很多 ng-shows、ng-hides 甚至 ng-switches。他们希望在列表中显示至少 50 次重复，这将导致或多或少 1500-2000 条指令得到解决。我检查了代码，前面的 Java 后端 + 自定义 JS 处理数据大约需要 150 毫秒，然后 Angular 会在显示之前对其进行咀嚼 2-3 秒。客户没有抱怨，但我很震惊:-)

在我的搜索中，我偶然发现了 ng-if 指令。现在，也许最好指出在构思这个 UI 时，没有 ng-if 可用。因为 ng-show 和 ng-hide 中包含返回布尔值的函数，所以我可以轻松地将它们全部替换为 ng-if。通过这样做，似乎不再评估所有内部指令。这意味着我退回到大约三分之一的正在评估的指令，因此，UI 加快了大约 500 毫秒 - 1 秒的加载时间。（我无法确定确切的秒数）

请注意：指令没有被评估的事实是对下面发生的事情的有根据的猜测。

因此，在我看来：如果您需要元素出现在页面上（即：用于检查元素或其他），但只是隐藏，请使用 ng-show/ng-hide。在所有其他情况下，使用 ng-if。

于 2014-03-03T09:29:33.203 回答
37

该ng-if指令从页面中删除内容并ng-show/ng-hide使用 CSSdisplay属性隐藏内容。

如果您想使用伪选择器来设置样式:first-child，这很有用。:last-child

于 2013-10-04T09:34:31.743 回答
16

@EdSpencer 是正确的。如果您有很多元素并且您使用 ng-if 仅实例化相关的元素，那么您正在节省资源。@CodeHater 也有点正确，如果您要经常删除和显示一个元素，隐藏它而不是删除它可以提高性能。

我发现 ng-if 的主要用例是，如果内容是非法的，它允许我干净地验证和消除元素。例如，我可以引用一个空图像名称变量，这将引发错误，但如果我 ng-if 并检查它是否为空，一切都很好。如果我做了一个 ng-show，错误仍然会触发。

于 2014-08-14T10:40:41.947 回答
7

关于 ng-if 和 ng-show 需要注意的一件重要事情是，当使用表单控件时，最好使用它，ng-if因为它会完全从 dom 中删除元素。

这种差异很重要，因为如果您创建一个输入字段，required="true"然后将ng-show="false"其隐藏，Chrome 将在用户尝试提交表单时抛出以下错误：

An invalid form control with name='' is not focusable.

原因是输入字段存在，required但由于它是隐藏的，Chrome 无法专注于它。这实际上会破坏您的代码，因为此错误会停止脚本执行。所以要小心！

于 2017-04-22T06:13:02.807 回答
5

@Gajus Kuizinas 和 @CodeHater 是正确的。这里我只是举个例子。当我们使用 ng-if 时，如果分配的值为 false，那么整个 html 元素将从 DOM 中删除。如果赋值为 true，则 html 元素将在 DOM 上可见。与父范围相比，范围会有所不同。但是在 ng-show 的情况下，它只会根据分配的值显示和隐藏元素。但它总是留在 DOM 中。只有可见性根据分配的值发生变化。

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

希望这个例子能帮助你理解范围。尝试为 ng-show 和 ng-if 提供错误值并在控制台中检查 DOM。尝试在输入框中输入值并观察差异。

<!DOCTYPE html>

你好普伦克！

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

于 2014-11-18T04:33:04.717 回答
2

事实上，ng-if与 不同的是，该指令ng-show创建了自己的范围，导致了有趣的实际差异：

angular.module('app', []).controller('ctrl', function($scope){
  $scope.delete = function(array, item){
    array.splice(array.indexOf(item), 1);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
   <h4>ng-if:</h4>
   <ul ng-init='arr1 = [1,2,3]'>
      <li ng-repeat='x in arr1'>
        {{show}}
        <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button>
        <button ng-if='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-show:</h4>
   <ul ng-init='arr2 = [1,2,3]'>
      <li ng-repeat='x in arr2'>
        {{show}}
        <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button>
        <button ng-show='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-if with $parent:</h4>
    <ul ng-init='arr3 = [1,2,3]'>
      <li ng-repeat='item in arr3'>
        {{show}}
        <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button>
        <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button>
        <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button>
      </li>
   </ul>
</div>

在第一个列表中，来自内部/自己on-click范围的事件、show变量已更改，但正在监视来自外部范围的另一个具有相同名称的变量，因此解决方案不起作用。在我们只有一个变量的情况下，这就是它起作用的原因。要修复第一次尝试，我们应该通过.ng-ifng-showshowshow$parent.show

于 2017-10-25T12:58:05.133 回答
1

  1. ng-if if false 将从 DOM 中删除元素。这意味着您的所有事件、附加到这些元素的指令都将丢失。例如，ng-click 到其中一个子元素，当 ng-if 评估为 false 时，该元素将从 DOM 中删除，并且当它为 true 时再次重新创建。

  2. ng-show/ng-hide 不会从 DOM 中移除元素。它使用 CSS 样式 (.ng-hide) 来隐藏/显示元素。这样您的事件、附加到子级的指令就不会丢失。

  3. ng-if 创建一个子作用域，而 ng-show/ng-hide 没有。

于 2016-05-27T10:37:22.347 回答
1

ng-show 和 ng-hide 以相反的方式工作。但是 ng-hide 或 ng-show 与 ng-if 的区别在于，如果我们使用 ng-if 则元素将在 dom 中创建，但使用 ng-hide/ng-show 元素将完全隐藏。

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom.
于 2017-06-19T06:50:13.743 回答
0

ngIf通过删除或重新创建元素对 DOM 进行操作。

而ngShow应用 css 规则来隐藏/显示事物。

对于大多数情况（并非总是如此），我将其总结为，如果您需要一次检查来显示/隐藏事物，请使用ng-if，如果您需要根据屏幕上的用户操作显示/隐藏事物（如选中一个复选框然后显示文本框，取消选中然后隐藏文本框等），然后使用ng-show

于 2018-12-03T18:34:27.787 回答
0

需要注意的是，现在发生在我身上的一件事：ng-show 确实通过 css 隐藏了内容，是的，但是它导致了 div 应该是按钮的奇怪故障。

我有一张底部有两个按钮的卡片，根据实际状态，一个与第三个交换，例如带有新条目的编辑按钮。使用 ng-show=false 隐藏左边的按钮（文件中的第一个）碰巧下面的按钮以卡片外的右边框结束。ng-if 完全不包含代码来解决这个问题。（如果使用 ng-if 而不是 ng-show 有一些隐藏的惊喜，请在这里检查）

于 2017-01-27T11:44:16.993 回答
-17

ng-if 和 ng-show 的一个有趣区别是：

安全

ng-if 块中存在的 DOM 元素在其值为 false 的情况下不会被渲染

在 ng-show 的情况下，用户可以打开您的 Inspect Element Window 并将其值设置为 TRUE。

随着一声呐喊，本应隐藏的全部内容被显示出来，这是一个安全漏洞。:)

于 2015-06-11T09:58:13.450 回答