title: Extracting Data from Child Elements and Using it in Directive
body: <p>I'm trying to create a generic directive that I want to use to display a flexible, spreadsheet-like data entry form.</p>
  
  <p>I'd like to put all data structure &amp; formatting information in the html code and have the directive take that and store it in the scope for later use.</p>
  
  <p>Here's a sample HTML I'd like to use (the information in the "field" elements is what I'd like to get into the scope):</p>
  
  <pre><code>&lt;array title="Breakdown" data="data.breakdown"&gt;
    &lt;field type="text" default="" name="descr"&gt;Description&lt;/field&gt;
    &lt;field type="number" default="0" name="price"&gt;Price&lt;/field&gt;
    &lt;field type="number" default="0" name="tax"&gt;Tax&lt;/field&gt;
  &lt;/array&gt;
  </code></pre>
  
  <p>And the directive so far</p>
  
  <pre><code>.directive('array', function(){
    return {
      restrict: "E",
      replace: true,
      transclude: true,
      templateUrl: "js/array-template.html",
      compile: function(tElement, tAttrs, transclude) {
        var x=transclude(tElement);              
         return function(scope, element, attrs) {  //the linking function
         scope.title=attrs.title;
         }
      }
    }
  }
  </code></pre>
  
  <p>The variable x gives me an array of html elements but it has not only the "field" elements but a bunch of empty "span" elements too. I could work with that if needed but I suspect that there's a simpler way to do it.</p>