ng if和ng show/ng hide之间有什么区别

Question

我试图理解ng if和ng show之间的区别，但在我看来它们是一样的。

选择使用其中一种或另一种有什么区别吗？

Answer 1

ng-if指令从页面中删除内容，ng-show/ng-hid使用CSSshow属性隐藏内容。

如果要使用伪选择器来设置样式，这将非常有用。

Answer 2

也许一个有趣的观点是，两者之间的优先级不同。

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

我在为当前客户构建的用户界面中观察并使用了它。整个用户界面都很拥挤，到处都是ng show和ng hide。不需要太多细节，但我构建了一个通用组件，可以使用JSON配置进行管理，因此我必须在模板内进行一些切换。存在一个ng repeat，在ng repeat内部显示一个表，其中有许多ng显示、ng隐藏，甚至存在ng开关。他们希望在列表中显示至少50个重复，这将导致或多或少需要解决1500-2000个指令。我检查了代码，前面的Java后端自定义JS处理数据大约需要150ms，然后Angular在显示之前会在上面咀嚼大约2-3秒。客户没有抱怨，但我很震惊：-）

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

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

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

Answer 3

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属性的表达式显示或隐藏给定的超文本标记语言元素。通过在元素上删除或添加ng-隐藏CSS类来显示或隐藏该元素。. ng-隐藏CSS类在AngularJS中预定义，并将显示样式设置为无（使用！重要标志）。

<!-- 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>

当表达式的计算结果为false时，将CSS类添加到元素的class属性中，使其隐藏。当为true时，将从元素中删除ng hide CSS类，使元素看起来不隐藏。