Question

我正在尝试创建一个这样的自定义表格元素：

<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指令工作？

感谢。

Answer 1

经过一些调查后，我找到了下一个解决方案：

//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();
};

我对这个问题的效率有一些担忧，但到目前为止效果还不错。

在我的自定义指令中使用动态指定的ng指令

1 个答案: