angularjs - 階層コレクションに基づく複数のヘッダーを持つ AngularJS 動的テーブル

Question

階層コレクションに基づいて、ヘッダー用に 2 行のテーブルを作成しようとしています。ng-repeat ではそれができないことがわかったので、ディレクティブと Angular.forEach を使用してジョブを作成しようとしています。

ここで jsfiddle : http://jsfiddle.net/echterpat/RxR2M/9/

しかし、私の問題は、テーブルを最初に表示したときにコレクションが空だった (後で REST 呼び出しによって埋められた) ため、リンク メソッドがすべてのテーブルを構築できなかったことです。そして、REST がコレクションを更新すると、link メソッドは呼び出されなくなりました...

REST回答の後にディレクティブを呼び出し、収集したデータでテーブルを埋めるアイデアはありますか?

angular.forEach を使用したディレクティブ:

myApp.directive('myTable', ['$compile', function (compile) {
var linker = function (scope, element, attrs) {
    var html = '<table BORDER="1"><thead>';
    html += '<tr><th><button type="submit" class="btn btn-info">Back</button></th>';
    angular.forEach(scope.myFirstCol, function (item, index) {
        html += '<th colspan="{{item.mySecondCol.length}}" id="item_{{item.id}}">    {{item.name}}</th>';
    });
    html += '</tr><tr><th><input type="checkbox" ng-model="selectAll"/></th>';
    angular.forEach(scope.myFirstCol, function (item2, index) {
        angular.forEach(item2.mySecondCol, function (item3, index) {
            html += '<th id="headerStep_{{item3.id}}">{{item3.name}}</th>';

        });
    });
    html += '</tr></thead>';
    html += '</table>';
    element.replaceWith(html);
    compile(element.contents())(scope);
    };

    return {
    restrict: 'E',
    rep1ace: true,
    link: linker,
    scope: {
        myFirstCol: '=myFirstCol'
    }
};

}]);