title: AngularJS + Directive: Multiple Transcluded Elements
body: <p>I'm trying to add a body directive which will have a left panel and a right panel. But in between these panels I will have some content that is private to the body directive. I'm currently using <strong>transclude=true</strong> option to load the content. But, I'm looking for a way to use two ng-transclude. I investigated a lot how to solve that, but I was not able to find an elegant solution. I had to manually add the transcluded objects in the compile step of the body directive. Following is the way I solved that:</p>
  
  <p><strong>Body Directive</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.directive('body', function () {
      return {
          restrict: 'A',
          transclude: true,
          scope: {
              title: '@'
          },
          templateUrl: 'body.html',
          compile: function compile(element, attrs, transclude) {
              return function (scope) {
                  transclude(scope.$parent, function (clone) {
                      for (var i = 0; i &lt; clone.length; i++){ 
                         var el = $(clone[i]);
                         if(el.attr('panel-left') !== undefined) {
                              element.find('#firstPanel').html(el);
                         } else if(el.attr('panel-right') !== undefined) {
                              element.find('#secondPanel').html(el);
                         }
                      }
                  });
              }
          }
      };
  });
  
  myApp.directive('panelLeft', function () {
      return {
          require: "^body",
          restrict: 'A',
          transclude: true,
          replace: true,
          template: '&lt;div ng-transclude&gt;&lt;/div&gt;'
      };
  });
  
  myApp.directive('panelRight', function () {
      return {
          require: "^body",
          restrict: 'A',
          transclude: true,
          replace: true,
          template: '&lt;div ng-transclude&gt;&lt;/div&gt;'
      };
  });
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="body.html"&gt;
      &lt;h1&gt; {{title}} &lt;/h1&gt;
      &lt;hr/&gt;
  
      &lt;div id="firstPanel" class="inner-panel"&gt;&lt;/div&gt;
      &lt;div id="innerMiddleContent" class="inner-panel"&gt;middle private content here&lt;/div&gt;
      &lt;div id="secondPanel" class="inner-panel"&gt;&lt;/div&gt;
  &lt;/script&gt;
  
  &lt;div body title="Sample Body Directive"&gt;
      &lt;div panel-left&gt;
          Public content that goes on the left
      &lt;/div&gt;   
  
      &lt;div panel-right&gt;
          Public content that goes on the right
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/alansouzati/wegyc7cv/">Here</a> is the JSFiddle for this example. I'm looking for something like this:</p>
  
  <p><strong>Good-to-have Template</strong></p>
  
  <pre><code> &lt;script type="text/ng-template" id="body.html"&gt;
       &lt;h1&gt; {{title}} &lt;/h1&gt;
       &lt;hr/&gt;
  
       &lt;div id="firstPanel" class="inner-panel" ng-transclude="panel-left"&gt;&lt;/div&gt;
       &lt;div id="innerMiddleContent" class="inner-panel"&gt;middle private content here&lt;/div&gt;
       &lt;div id="secondPanel" class="inner-panel" ng-transclude="panel-right"&gt;&lt;/div&gt;
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>Question</strong>: Am I doing something wrong? Is there a recommended way to solve this issue?</p>