Angular 1.2 and Directives for Showing/Hiding Content

Angular-1.2-and-Directives-for-Showing-Hiding-Content.markdown

Angular 1.2 and Directives for Showing/Hiding Content

This demo provides a live opportunity to compare/contrast Angular's differing approaches to displaying conditional content. Additional details inline in the pen...

A Pen by Christian Lilley on CodePen.

License.

index.html

<div ng-app='switchDemo'>
  <header>
    <h1>Demo: Angular (1.20-rc3) Directives for Showing/Hiding content</h1>
    <!--<p>testing expressions: {{22/7 | number:4}}</p>-->    
    <p class="intro-text">This CodePen is designed to show a critical and non-documented distinction between several of Angular's directives. On the surface, ng-show/ng-hide, ng-switch and the new ng-if all  produce exactly the same results (partials/DOM-fragments that appear and disappear), but via different syntax and in response to different kinds of values.</p>
    <p class="intro-text">But that's where the similarities end. They go about this business in fundamentally different ways: ng-show/ng-hide simply toggle the visibility of an element or DOM fragment, while ng-switch and ng-If actually detach and reattach the elements/fragments/templates from the DOM.</p>
    <p class="intro-text">This has significant implications for performance, for CSS selectors, and other considerations.</p>
    <p class="intro-text">Understand the differences by playing with the examples below. Use your browser's inspector to view the elements in the shaded areas. Use the buttons to toggle the content within the areas and observe how the different directives handle the content differently.  </p>
    
    
  </header>
  <div class="container" ng-controller="demoCtrl">
    <h3>ng-Show demo area</h3>
    <p class="intro-text">When you toggle through the values on a ng-show/ng-hide, Angular leaves these inline templates in the DOM, and simply toggles their `display` property, to pull them out of the page flow.</p>
    <div class="highlight">
      <button class="btn btn-primary" ng-click="showStatus=!showStatus">Toggle Content</button>
      <p ng-show="showStatus" class="bs-callout bs-callout-danger">True: I'm here all the time!</p>
      <p ng-hide="showStatus" class="bs-callout bs-callout-warning">False: I'm also here all the time!</p>
    </div>

    <h3>ng-Switch demo area</h3>
    <p class="intro-text">When you toggle through the values on an ng-switch, Angular actually detaches these inline templates from the DOM, then reattaches them later if needed.</p>
    <div class="highlight">
    <button class="btn btn-primary" ng-click="increment()">Toggle Content</button>
      <div ng-switch="switchStatus">
        <p ng-switch-when="0" class="bs-callout bs-callout-danger">0: Now you see me...</p>
        <p ng-switch-when="1" class="bs-callout bs-callout-warning">1: Now you don't!</p>
        <p ng-switch-when="2" class="bs-callout bs-callout-info">2: Ignore those other two imposters.</p>
        <p ng-switch-default>Default: This is a mistake if you see me!</p>
        <p><em>(This paragraph here will always be present, as it's not conditional. This allows us to interleave conditional and non-conditional content in the template. Note that Angular 1.0.8 used to append() ng-switch'ed content to the end of the container, but Angular 1.2 leaves ng-switch'ed content in it's original position. Compare to <a href="">this Plunker based on 1.0.8</a>.)</em></p>
      </div>
    </div>

    <h3>ng-If demo area</h3>
    <p class="intro-text">Now, let's compare ngIf to the other two. On the surface, ngIf looks just like ngShow, in that it reacts to a boolean (or rather, a falsy/truthy value). But observe how the behavior of the DOM elements is actually much more like ngSwitch...</p>

    <div class="highlight">
      <button class="btn btn-primary" ng-click="ifValue=!ifValue">Toggle Content</button>
      <p class="bs-callout bs-callout-info" ng-if="showIf()">True: I'll disappear from the DOM if you click that button.</p>
<!--      <p><em>Un-comment me to see that I stay put between these ng-if's.</em></p>-->
      <p class="bs-callout bs-callout-warning" ng-if="hideIf()">False: So will I. </p>
<!--      <p><em>Un-comment me too: I stay put as well.</em></p>-->
    </div>
    
  </div>
</div>

script.js

angular.module('switchDemo', [])
.controller('demoCtrl', function($scope) {
    $scope.showStatus = true;
    $scope.switchStatus = 0;
    $scope.ifValue = true;
    $scope.showIf = function() {
      return $scope.ifValue;
    };
    $scope.hideIf = function() {
      return !$scope.ifValue;
    };
  
    $scope.increment = function() {
      $scope.switchStatus = ($scope.switchStatus === 0) ? 1 : 0;
    }
  });

style.css

/* Styles go here */
header {
  padding: 20px 40px;
}

.highlight {
display: block;
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
}

.btn-primary {
  margin-bottom: 20px;
}
.intro-text {
  font-size: 14px;
  color: #999;
}
.demo-text {
  display: block;
  background: green;
  color: white;
  font-weight: bold;
  padding: 10px;
}
/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */

/* Common styles for all types */
.bs-callout {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}

/* Variations */
.bs-callout-danger {
  background-color: #fac3c3;
  border-color: #e35268;
}
.bs-callout-danger h4 {
  color: #b94a48;
}
.bs-callout-warning {
  background-color: #fff1b8;
  border-color: #fab937;
}
.bs-callout-warning h4 {
  color: #c09853;
}
.bs-callout-info {
  background-color: #c2ebff;
  border-color: #2b8799;
}
.bs-callout-info h4 {
  color: #3a87ad;
}