在 Angular 中，通过使用 ng-show/ng-hide 指令可以控制 HTML 元素的显示与隐藏。但是，在使用这些指令时，我们经常会遇到样式问题，比如：隐藏的元素占用了空间，导致布局错乱，或者隐藏的元素的样式并没有被完全清除。
为了解决这些问题，我们需要深入了解 ng-show/ng-hide 指令的使用和工作原理，并学习如何通过 CSS 样式来完善这些指令。
ng-show/ng-hide 指令的用法
ng-show/ng-hide 指令的作用是根据表达式的值来决定元素是否显示。例如，下面的代码会根据变量 showHello 的值决定元素是否显示：
<div ng-show="showHello">Hello, world!</div>
当 showHello 为 true 时，元素显示；否则，元素隐藏。
ng-show/ng-hide 指令内部实现了样式的切换，当元素隐藏时，会添加一个 ng-hide 类；当元素显示时，会移除这个 ng-hide 类。
样式问题及解决方法
占用空间导致布局错乱
当使用 ng-hide 隐藏元素时，这个元素并没有被完全清除。它仍然占用着它原本的空间，这可能会导致布局错乱。例如，下面的代码中，当变量 showHello 为 false 时，"Hello, world!" 已经被隐藏了，但是它仍然占用着它原本的空间：
<div ng-show="showHello">Hello, world!</div> <p>Some other text...</p>
这可能会导致 "Some other text..." 的位置受到影响。
解决方法是使用 ng-if 指令代替 ng-show。ng-if 指令会完全移除元素，而不仅仅是隐藏它。例如，下面的代码使用 ng-if 指令，当变量 showHello 为 false 时，"Hello, world!" 已经被完全移除了：
<div ng-if="showHello">Hello, world!</div> <p>Some other text...</p>
当 showHello 为 false 时，"Hello, world!" 这个元素不再存在，不会影响后面元素的位置。
样式未被完全清除
当使用 ng-show 隐藏元素时，元素的样式并没有被完全清除。例如，下面的代码中，当变量 showHello 为 false 时，"Hello, world!" 被隐藏了，但是它的样式并没有被完全清除。它还保留着原来的样式，可能会对布局造成影响：
<style>
.hello {
font-size: 20px;
color: red;
}
</style>
<div class="hello" ng-show="showHello">Hello, world!</div>
<p>Some other text...</p>解决方法是使用 ng-class 指令来动态控制样式。例如，下面的代码使用 ng-class 指令，根据变量 showHello 的值来动态添加或删除 hello-hide 类：
-- -------------------- ---- -------
-------
------ -
---------- -----
------ ----
-
----------- -
-------- -----
-
--------
---- ------------- ------------------------ ------------------- ------------
------- ----- -----------当 showHello 为 false 时，"Hello, world!" 的样式被动态地添加了 hello-hide 类，这个类将元素的 display 属性设为 none，元素被完全隐藏。
结论
在使用 ng-show/ng-hide 指令时，要注意隐藏元素可能会占用空间，导致布局错乱；还要注意隐藏元素的样式可能不会被完全清除。通过使用 ng-if 指令可以解决占用空间的问题；通过使用 ng-class 指令可以
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c38da208e8e1a085c3917