2

マークアップを正規化して、さまざまなデータ ソースを受け入れることができるテーブル ディレクティブに取り組んでいます。rowsデータ オブジェクトが独自の子を持つことができるという問題に遭遇しました。この SO postを使用して、必要な HTML を生成する再帰関数を含む新しいディレクティブを作成しました。

<nested-rows rows="rows" columns="columns"></nested-rows>

ただし、行データの動的な性質のため、td を静的に定義していません。

歴史的に、私はこれをしました：

<td ng-repeat="column in columns">
  <cell-content renderer-id="column.rendererId" content="row[column.id]">
  </cell-content>
</td>

単純に列配列を反復し、row.someColumn の値を別のディレクティブに渡して、さまざまなセル コンテンツ (リスト、ボタン、アイコンなど) を生成します。ここrow.someColumnには、その特定の列/列に必要なデータが含まれています。タイプ。

私が抱えている問題は、この新しいディレクティブにあります。もう変数がrowないので、呼び出しrow[column.id]は未定義を返します。これが私の指示です：

.directive('nestedRows', function($compile) {
    return {
        restrict: 'EA',
        replace: true,
        link: function(scope, element, attrs) {
            var html = "";
            var recursive = function(rows) {
                angular.forEach(rows, function(row, index) {
                    html +=
                        '<tr>' +
                            '<td ng-repeat="column in columns">' +
                            '<cell-content renderer-id="column.rendererId"' +
                                  'content="row[column.id]"></cell-content>' +
                            '</td>' +
                        '</tr>';
                    if(row.children) {
                        recursive(row.children);
                    }
                })
            }
            if(attrs && attrs.rows) {
                recursive(attrs.rows);
            }
            element.html(html);
            $compile(element.contents())(scope);
        }
    }
})

私がする必要があるのは、適切なデータを cellContent ディレクティブに渡すことです。これどうやってするの？

4

1 に答える 1

1

これを行う 1 つの方法は、行ディレクティブでコントローラーを作成し、列ディレクティブでそれを「要求」することです。

このコンテキストでは、コントローラーは、親ディレクティブがインスタンス化されたときに呼び出される単なる関数です。関数によって返されるものは何でも、「コンパイル」メソッドの 4 番目のパラメーターでコントローラーを要求するディレクティブに渡されます。

例については、私の ng-scroller ディレクティブを参照してください

詳しい説明はこちらもご覧ください

于 2013-06-03T21:14:35.160 に答える