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

【问题标题】：Using dynamicaly specified ng directives within my custom directive在我的自定义指令中使用动态指定的 ng 指令
【发布时间】：2013-03-25 15:55:04
【问题描述】：

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

<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 指令时，它们是如何工作的？

谢谢。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案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();
};

我对这种解决方案的效率有些担心，但到目前为止效果很好。

【讨论】：