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 回答