请求提供ng-if、ng-show、ng-hide示例并解析三者存在差异的原因

Great question! I totally get why these three directives might feel interchangeable at first—they all control element visibility, but each has a specific purpose based on how they interact with the DOM and perform. Let’s break this down with clear explanations and examples:

1. DOM Presence (The Big One) #

• ng-if: Adds or removes the element directly from the DOM. When the condition is false, the element (and all its children, event listeners, and bindings) is completely deleted. When the condition becomes true, it re-creates the element and re-binds everything from scratch.
• ng-show/ng-hide: Only toggles visibility using CSS. The element stays in the DOM at all times—ng-show adds/removes a class that sets display: block, while ng-hide uses display: none via the built-in ng-hide CSS class.

2. Performance Tradeoffs #

• ng-if: Best for elements that don’t need frequent show/hide toggles. Creating/destroying DOM nodes has overhead, but hiding via removal saves memory for large components or complex elements that aren’t needed often.
• ng-show/ng-hide: Ideal for frequent toggles. Since it’s just a CSS change, there’s no DOM manipulation overhead after the initial render—switching visibility is nearly instant.

3. Scope Behavior #

• ng-if: Creates a new child scope that inherits from the parent. This means if you modify a primitive variable inside ng-if, it won’t affect the parent scope’s variable (unless you use object properties, which are passed by reference).
• ng-show/ng-hide: Uses the current scope directly—no new scope is created, so changes to variables affect the parent scope immediately.

Example 1: ng-if for One-Time/Infrequent Toggles #

Perfect for user authentication states (login/logout views) where the state doesn’t change constantly:

<div ng-controller="AuthController">
  <div ng-if="isAuthenticated">
    <h3>Welcome, {{user.name}}!</h3>
    <button ng-click="logout()">Sign Out</button>
  </div>
  <div ng-if="!isAuthenticated">
    <input type="text" ng-model="login.username" placeholder="Username">
    <input type="password" ng-model="login.password" placeholder="Password">
    <button ng-click="login()">Sign In</button>
  </div>
</div>

When the user is logged out, the welcome panel is completely removed from the DOM—no unnecessary elements or bindings hanging around.

Example 2: ng-show for Frequent Toggles #

Great for UI elements like collapsible panels or tabs that users might toggle often:

<div ng-controller="PanelController">
  <button ng-click="isPanelOpen = !isPanelOpen">
    {{isPanelOpen ? 'Hide Panel' : 'Show Panel'}}
  </button>
  <div ng-show="isPanelOpen" class="panel-content">
    <p>This content toggles instantly without DOM reloading!</p>
    <ul>
      <li>Quick to show/hide</li>
      <li>Preserves state (e.g., form inputs stay filled)</li>
    </ul>
  </div>
</div>

Toggling here is fast because we’re just switching a CSS class—no DOM nodes are created or destroyed.

Example 3: ng-hide for Reverse Logic #

ng-hide is just the inverse of ng-show—use it when the readability of your code improves with negative logic. For example, hiding a submit button until a form is valid:

<div ng-controller="FormController">
  <form name="userForm">
    <input type="email" ng-model="user.email" required>
    <span ng-show="userForm.email.$invalid">Please enter a valid email address</span>
    
    <input type="password" ng-model="user.password" minlength="8" required>
    <span ng-show="userForm.password.$invalid">Password must be at least 8 characters</span>

    <!-- Hide submit button if form is invalid -->
    <button ng-hide="userForm.$valid">Submit</button>
  </form>
</div>

Here, ng-hide="userForm.$valid" reads more naturally than ng-show="!userForm.$valid"—choose whichever makes your code easier to understand.

• Use ng-if when: The element doesn’t need frequent toggles, or you want to completely remove it from the DOM when hidden (e.g., sensitive content, large components).
• Use ng-show/ng-hide when: You need fast, frequent visibility toggles, or the element must stay in the DOM to preserve state (e.g., form inputs, persistent event listeners).

内容的提问来源于stack exchange，提问作者peepaa