Ng-Show 和 Ng-Hide，有什么区别？

Question

我正在自学 Angular-JS，我找不到关于 ng-show 和 ng-hide 之间区别的任何明确答案。在我看来，它们在功能上是等价的。

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

使用一个比另一个有任何性能提升，或者是否存在其中一个优于另一个的情况，或者它只是同一枚硬币的两个面，您使用对您来说更合乎逻辑的那个？

抱歉，如果在其他地方 asked/answered 但我找不到它。

Answer 1

它们的作用正好相反，想怎么用就怎么用。

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

<div ng-show="true">

而不是：

<div ng-hide="!true">

Answer 2

ng-show 和 ng-hide 只是将显示设置为 'None' 但 ng-if 实际上从 DOM.

中删除了元素

至于性能，我认为它没有太大区别，但是由于 ng-if 删除了所有附加到该元素及其子元素以及 DOM 元素的事件处理程序，所以我认为 ng-show 或 ng-hide 会更快。

Answer 3

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[=22，它将显示它=]

Answer 4

此指令有一行不同：

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 class.

如您所见，有NG_HIDE_IN_PROGRESS_CLASS。
ng-hide-animate css class 暂时适用于这两种情况。
您可以使用它来为元素 appear/disappear.
设置动画你应该使用两个选择器来实现双向动画：

Ng-Show & Ng-Hide, what is the difference?