title: AngularJS Directives: Using ng-switch breaks transclusion
body: <p>I have created a directive for displaying large amounts of data in a tree structure.  When an element is collapsed, its content is hidden using the ng-show command.</p>
  
  <p>Here is a heavily simplified version <a href="http://plnkr.co/edit/mRXmqN?p=preview" rel="nofollow">on plunker</a>.</p>
  
  <p>The directive is called collapsible-test, and is used as so:</p>
  
  <pre><code>&lt;div collapsible-test&gt;
      &lt;p&gt;Here is some content....&lt;/p&gt;
      &lt;div collapsible-test&gt;
          &lt;p&gt;Here is some more content....&lt;/p&gt;
          &lt;div collapsible-test&gt;
              &lt;p&gt;Here is even more content....&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The part of the directive template that controls the collapsing looks like this:</p>
  
  <pre><code>&lt;div ng-show="!collapsed" class="panel-body"&gt;
      &lt;div ng-transclude&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This all works fine, however I will need to use it for <strong>hundreds</strong> of nested elements using ng-repeat.  This causes the page to take 10-15 seconds to load, and then there are also great delays when expanding and collapsing the elements.</p>
  
  <p>I tried to alleviate this by replacing the ng-show directive with ng-switch. (I'll use ng-if when I update angular at a later date.)  This approach does not work, because using the transclude service on DOM elements that are not yet present generates an error.</p>
  
  <pre><code>&lt;div ng-switch="collapsed"&gt;
      &lt;div ng-switch-when="false" class="panel-body"&gt;
          &lt;div ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought I might have to recompile every time I change the 'collapse' state, but I can't understand how to make it work.</p>
  
  <p>Or, perhaps there is a better way to solve my problem that I haven't thought of yet.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>OverZealous answered my question perfectly, thanks!  This is just an update for those who try to dosomething similar.  This method will only work outside of an ng-repeat loop.  It appears that ng-if converts the DOM code into a comment when it fails the test.  Therefore, ng-repeat will do nothing but repeat the comment (or something like that).  So ng-if and ng-switch are still not foolproof, but they are fine you don't require ng-repeat.</p>