0

次のようなカスタムテーブル要素を作成しようとしています。

<datatable items='tableItems' columns='columnsConfig' />

ここで、「tableItems」はアイテムの配列であり、「columnsConfig」は列レンダリングの構成です。次のようになります。

$scope.tableItems = [...]; 
$scope.columnsConfig = [
        {   
            name: 'check',
            with: '20px',
            renderer: function (rowItem, cellValue) {
                return '<input ng-click="clickHandler()" type="checkbox"/>';
            }
        },

        {name: "person.fullName", text: "Name", visible: true, width: '150px'},

        {
            name: "person.age",
            text: "Age",
            renderer: function(rowItem, cellValue) {
                return cellValue + ' years old';
            }
        }
 ];

レンダラー関数内で、追加のデータ処理またはテンプレートを指定できます。

私のディレクティブテンプレートには、次のものがあります。

         <tbody>
            <tr ng-repeat="item in items">
                <td ng-repeat="column in columns"
                    ng-show="column.visible"
                    ng-bind-html-unsafe="getCellValue(item, $index)">
                </td>
            </tr>
        </tbody>

'getCellValue'関数内で、レンダラー関数を呼び出します。ディレクティブコードは次のとおりです。

angular.module('components', [])
    .directive('datatable', function () {
        return {
            restrict: 'E',
            templateUrl: '../pages/component/datatable.html',

            scope: {
                items: "=",
                columns: "="               
            },

            controller: function ($scope, $element) {

                $scope.getCellValue = function (item, columnIndex) {
                    var column = $scope.columns[columnIndex];

                    // return render function result if it has been defined
                    if (column.renderer) {
                        return column.renderer(item, getItemValueByColumnName(item, column.name));
                    }

                    // return item value by column   
                    return getItemValueByColumnName(item, column.name);
                };
            }
        }
    });

ng-...ディレクティブを除いてすべて正常に動作します。$ compileなどを使用して「レンダラー」関数の結果をさらに処理する必要があると思いますが、それでもこれを実現する方法がわかりません。したがって、問題は、レンダラー関数を介して指定したときにngディレクティブをどのように機能させるかということです。

ありがとう。

4

1 に答える 1

0

いくつかの調査の後、私は次の解決策を見つけました：

//after all DOM manipulations we should recompile parts that has been modified
setTimeout(function () {
    applyAfterRenderDOMChanges();
}, 0);

var applyAfterRenderDOMChanges = function () {
    var cells = $('td', element).children();
    $compile(cells)(scope);
    scope.$apply();
};

このソリトンの効率について懸念がありますが、これまでのところうまく機能しています。

于 2013-03-28T15:10:32.773 に答える