Angularjs ng if和ng show/ng hide之间有什么区别_Angularjs_Angularjs Ng Show_Angularjs Ng If

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

angularjs

Angularjs ng if和ng show/ng hide之间有什么区别,angularjs,angularjs-ng-show,angularjs-ng-if,Angularjs,Angularjs Ng Show,Angularjs Ng If,我试图理解ng if和ng show/ng hide之间的区别，但它们在我看来是一样的选择使用其中一种或另一种有什么区别吗？ngIf ngIf指令基于表达式删除或重新创建DOM树的一部分。如果分配给ngIf的表达式的计算结果为假值，则该元素将从DOM中删除，否则该元素的克隆将重新插入DOM中  <div ng-if="1"></div>

我试图理解

ng if

和

ng show

ng hide

之间的区别，但它们在我看来是一样的

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

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>

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

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

ngShow 指令

ngShow

根据提供给

ngShow

属性的表达式显示或隐藏给定的HTML元素。通过在元素上删除或添加

ng hide

CSS类来显示或隐藏元素。

.ng hide

CSS类在AngularJS中预定义，并将显示样式设置为“无”（使用

！important

标志）

当

ngShow

表达式的计算结果为

false

时，将

ng hide

CSS类添加到元素的

class

属性中，从而使其隐藏。当

true

时，将从元素中删除

ng hide

CSS类，从而使元素看起来不隐藏。

指令

ng if

将从页面中删除内容，并且

ng show/ng hide

使用CSS

display

属性隐藏内容

如果您想使用

：first child

和

：last child

伪选择器来设置样式，这一点很有用。

可能有一点很有趣，那就是两者之间的优先级不同

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

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

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

请注意：没有对指令进行评估这一事实是一个关于下面发生了什么的有根据的猜测。

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

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

我发现ng if的主要用例是，如果内容非法，它允许我干净地验证和删除元素。例如，我可以引用一个null image name变量，这将抛出一个错误，但如果我检查if并检查它是否为null，这一切都很好。如果我做了一个ng节目，错误仍然会发生。

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

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

<!DOCTYPE html>

你好，普朗克



ng show=true:：


ng if=true:：

{{data}}

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

安全性

ng if块中存在的DOM元素在其值为false时不会呈现

其中，与ng show一样，用户可以打开Inspect元素窗口并将其值设置为TRUE

随着一声巨响，原本要隐藏的所有内容都被显示出来，这是一种安全漏洞。：）

ng if false将从DOM中删除元素。Th

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

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

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

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

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.