angularjs - 子要素からデータを抽出し、ディレクティブで使用する

Question

柔軟なスプレッドシートのようなデータ入力フォームを表示するために使用する汎用ディレクティブを作成しようとしています。

すべてのデータ構造とフォーマット情報をhtmlコードに入れ、ディレクティブにそれを取得させ、後で使用できるようにスコープに保存したいと思います。

使用したいサンプル HTML を次に示します (「フィールド」要素の情報は、スコープに入れたいものです)。

<array title="Breakdown" data="data.breakdown">
  <field type="text" default="" name="descr">Description</field>
  <field type="number" default="0" name="price">Price</field>
  <field type="number" default="0" name="tax">Tax</field>
</array>

そして、これまでのディレクティブ

.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;
       }
    }
  }
}

変数 x は html 要素の配列を提供しますが、「フィールド」要素だけでなく、空の「スパン」要素もたくさんあります。必要に応じてそれで作業できますが、もっと簡単な方法があると思います。