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

Question

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

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

使用一个比另一个有任何性能增益，或者是否存在一个比另一个更可取的情况，或者它只是同一枚硬币的两个面，而你使用对你来说更合乎逻辑的那个？

抱歉，如果已在其他地方询问/回答了此问题，但我找不到。

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。第二行 withng-hide将做同样的事情，但条件相反：如果你的条件是，它将隐藏你的 html，如果条件是true，它会显示它false