Ng-Show＆amp; Ng-Hide，有什么区别？

Question

我正在教自己Angular-JS，我找不到任何关于ng-show和ng-hide之间区别的确切答案。对我来说，他们似乎在功能上是平等的。

我理解它们与ng-if之间的区别，因为ng-if实际上删除了观察者等，而显示和隐藏似乎也有同样的目的。

是否有任何一种性能增益使用一种优于另一种或者是否存在一种优于另一种的情况OR或者它只是同一枚硬币的两面并且您使用哪种更符合逻辑？

如果有人在其他地方询问/回答，但我找不到，请道歉。

Answer 1

它们彼此相反，可以根据需要使用。

我认为这归结为编码偏好，因为有些人喜欢编写代码，以便在值变为真时使用该方法，而不是使用非假的！

<div ng-show="true">

而不是：

<div ng-hide="!true">

Answer 2

该指令在一行中有所不同：

<强> ngShowDirective ：

    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

<强> ngHideDirective ：

    $animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

正好适用于ng-hide CSS类。

如您所见，NG_HIDE_IN_PROGRESS_CLASS 它是ng-hide-animate css类，在两种情况下都是临时应用的 您可以使用它来动画元素出现/消失 您应该使用两个选择器来实现双向动画：

• .animate-hide出现
• .animate-hide.ng-hide隐藏

Answer 3

ng-show和ng-hide只需将显示设置为“无”，但ng-if实际上会从DOM中删除该元素。

就性能而言，我认为它没有产生任何巨大的差异，但是因为ng-if删除了附加到此元素及其子元素以及DOM元素的所有事件处理程序，所以我认为ng-show或ng-hide会更快。

Answer 4

ng-show和ng-hide使用其中一个指令将display: none !important应用于您的html。 ng-show和ng-hide之间没有区别：它只是语义和您的选择。

所以，让我们假设您有下一个HTML：

<div ng-show='condition'><p>{{text}}</p></div>

<div ng-hide='condition'><p>{{text}}</p></div>

因此，在这种情况下，如果您的条件为true，那么第一行代码将显示您的html并在条件为false时隐藏它。使用ng-hide的第二行会执行相同的操作，但条件相反：如果您的条件为true，它会隐藏您的HTML，如果条件为false则会显示