angularjs - ディレクティブからのテーブルの生成

Question

ディレクティブとデータの配列を使用してテーブルを生成する方法を理解しようとしています。基本的に、次のように html を構成できるようにしたいと考えています。

<div ng-init="myData = [name: 'John', age: 22]"></div>

<dynamic-table data="myData">
    <field title="column 1" class="myClass" expression="{{object.name}}" />
    <field title="column 2" class="myClass" expression="{{object.age}}" />
</dynamic-table>

その html から、ディレクティブで次の HTML を生成する必要があります。

<table>
    <tr>
        <th>column 1</th>
        <th>column 2</th>
    </tr>
    <tr>
        <th>John</th>
        <th>22</th>
    </tr>
</table>

問題は、ディレクティブに渡される前ではなく、ディレクティブ内で式 {{object.name}} を評価する必要があることです。問題を示すjsfiddle hereがあります。また、これを達成するための他の方法についても知りたいです。compile ディレクティブ関数を使用して試してみましたが、最終的に式で同じことに遭遇します。もちろん、ng-repeat を使用してこれを行うこともできますが、私のディレクティブは最終的にこれ以上のことを行うことになります。

フィドルからのディレクティブは次のとおりです。

var appModule = angular.module('app', [])
.directive('dynamicTable', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:
'<table>' +
    '<tr>' +
        '<th ng-repeat="field in fields">{{field.title}}</th> ' +
    '</tr>' +
    '<tr ng-repeat="object in data" ng-transclude>' +
        '<td ng-repeat="field in fields">' +
            '{{field.expression}}' +
        '</td>' +
    '</tr>' +
'</table>',
        scope: {
            data: '='
        },
        controller: function ($scope) {
            $scope.fields = [];
        }
    };
}).directive('field', function () {
    return {
        restrict: 'E',
        require: '^dynamicTable',
        link: function (scope, element, attrs, controller) {
            var exists = false;
            for (var idx = 0; idx < scope.fields.length; idx++) {
                if (scope.fields[idx].title === attrs.title) {
                    exists = true;
                    break;
                }
            }

            if (!exists) {
                scope.fields.splice(0, 0, { title: attrs.title, 'class': attrs.class, expression: attrs.expression });
            }
        }
    };
});