title: Angularjs: transclude directive template
body: <p>How to use transclusion in the below case. The intention is to use markup in the html (partials) file, than defining it in template (within the directive).</p>
  
  <p>I found a great tree directive here. (<a href="https://groups.google.com/forum/#!msg/angular/vswXTes_FtM/kfT_CufjLjgJ">source</a>)
  Original: <a href="http://jsfiddle.net/n8dPm/">http://jsfiddle.net/n8dPm/</a></p>
  
  <p>Instead of defining the template in the directive, I was trying to use a transcluded content. I also updated Angular to 1.2.0.rc2.
  Updated: <a href="http://jsfiddle.net/aZx7B/2/">http://jsfiddle.net/aZx7B/2/</a></p>
  
  <p>got below error</p>
  
  <blockquote>
    <p>TypeError: Property '$transclude' of object [object Object] is not a
    function</p>
  </blockquote>
  
  <p>code:</p>
  
  <pre><code>module.directive("tree", function($compile) {
      return {
          restrict: "E",
          transclude: true,
          scope: {family: '='},
          template:       
              '&lt;ul&gt;' + 
                  '&lt;li ng-transclude&gt;&lt;/li&gt;' +
                  '&lt;li ng-repeat="child in family.children"&gt;' +
                      '&lt;tree family="child"&gt;&lt;/tree&gt;' +
                  '&lt;/li&gt;' +
              '&lt;/ul&gt;',
          compile: function(tElement, tAttr) {
              var contents = tElement.contents().remove();
              var compiledContents;
              return function(scope, iElement, iAttr) {
                  if(!compiledContents) {
                      compiledContents = $compile(contents);
                  }
                  compiledContents(scope, function(clone, scope) {
                           iElement.append(clone); 
                  });
              };
          }
      };
  });
  
  &lt;div ng-app="myapp"&gt;
      &lt;div ng-controller="TreeCtrl"&gt;
          &lt;tree family="family"&gt;
              &lt;p&gt;{{ family.name }}&lt;/p&gt;
          &lt;/tree&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Edit:</h2>
  
  <p>With David's suggestion, made some changes. <a href="http://jsfiddle.net/aZx7B/3/">http://jsfiddle.net/aZx7B/3/</a>
  now, it prints, Parent. changing, <code>family</code> -> <code>treeFamily</code> didn't work though</p>