angularjs - 何时使用 ng-if 与 ng-show/ng-hide？

Question

我知道 ng-show 和 ng-hide 会影响元素上设置的类，并且 ng-if 控制元素是否呈现为 DOM 的一部分

有没有关于选择 ng-if 而不是 ng-show/ng-hide 或反之亦然的例子？

Answer 1

你已经在你的问题中总结了它。如果要根据条件显示和隐藏 DOM，请使用ng-show. 这适用于工作流、选项卡、部分等之间的 DOM 转换。

<div ng-show="vm.tab == 'products'"></div>

如果您只想在条件发生时有条件地渲染 DOM，请使用ng-if. 这对于您不想公开更多 DOM 的权限特别有用。

<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />

Answer 2

如果有一些您不想以任何方式向用户显示的信息。您希望该用户即使在编辑之后也看不到它DOM，否则使用.inspect elementng-ifng-show

ng-show 呈现dom但如果条件为假，则元素display将为invisible.

`ng-if` renders the `dom` only if condition is true

在某些情况下您被迫使用考虑您正在使用在任何元素上ng-show ex:运行的任何 jquery 插件。dom ready如果元素稍后在 ng-if 为真时呈现，则 jquery 将无法工作。在这种情况下，您将需要使用ng-show