Javascript 如何使用ngRepeat在范围变量内进行评估？

我已经创建了一个自定义指令，它有一组嵌套的ngrepeats。外部重复行的数据。内部重复列模板

<div ng-repeat="item in data">
    <div ng-repeat="col in columns">
        {{col.templateContent}}
    </div>
</div>

当它运行时，它将模板内容显示为字符串{{item['firstName']}{{item['lastName']}}。怎样才能得到变量的内容进行动态评价

他们会像这样使用

<datagrid endpoint="User" query="userQuery" enable-paging="true" aggregate-search="search">
    <templatecolumn header-text="Name">
       {{firstName}} {{lastName}}
    </templatecolumn>
</datagrid>

这是我的两个指示

app.directive('templatecolumn', function () {
    return {
        restrict: 'E',
        replace: false,
        transclude:true,
        scope: {
            headerText: '@',
            enableSorting: '@'
        },
        require: '^datagrid',
        link: function (scope, element, attrs, parentController, transclude) {

            transclude(scope, function (clone) {
                // clone is transcluded content
                scope.enableSorting = scope.enableSorting === 'false' ? false : scope.enableSorting !== false;

                parentController.addColumn({
                    isTemplateColumn: true,
                    headerText: scope.headerText,
                    enableSorting: scope.enableSorting,
                    templateContent: clone.html().replace(/{{/g, "{{item['").replace(/}}/g, "']}}")
                });
            });
        },
        template: '<div></div>'

    };
});



app.directive('datagrid', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            endpoint: '@',
            query: '=',
            enablePaging: '@',
            keyField: '@',
            aggregateSearch: '='
        },
        transclude:true,
        replace: true,
        templateUrl: 'app/ui/partials/datagrid.html',
        compile: function ($element, $attrs, linker) {
            if (!$attrs.keyField) { $attrs.keyField = 'id'; } // keyField = id as default
        },
        controller: ['$scope', 'dataSvc', function ($scope, dataSvc) {
            $scope.columns = [];
            $scope.data = [];


            $scope.recordsPerPage = 10;
            $scope.orderby = '';
            $scope.totalRecords = 0;
            $scope.currentPage = 1;
            $scope.aggregateFilterQuery = '';

            $scope.dataService = new dataSvc($scope.endpoint);

            $scope.loadGrid = function (orderby) {

                if (orderby) {
                    if ($scope.orderby.substring(0, orderby.length) === orderby) { // if same property as previous sort
                        if ($scope.orderby.indexOf(' desc') == -1) { // toggle desc/asc
                            orderby = orderby + ' desc';
                        } else {
                            orderby = orderby.replace(' desc', '');
                        }
                    }
                    $scope.orderby = orderby;
                }

                $scope.query
                    .orderby($scope.orderby)
                    .skip(($scope.currentPage - 1) * $scope.recordsPerPage)
                    .top($scope.recordsPerPage);

                if ($scope.aggregateSearch && $scope.aggregateFilterQuery) {
                    $scope.query.filter($scope.aggregateFilterQuery.replace(/{{search}}/g, $scope.aggregateSearch));
                }

                $scope.dataService.get($scope.query).success(function (data) {
                    $scope.data = data.value;
                    $scope.totalRecords = data['@odata.count'];
                });
            };

            $scope.$watch('aggregateSearch', function () { $scope.loadGrid(); });

            $scope.delete = function(id) {
                $scope.dataService.delete(id).success(function () {
                    $scope.loadGrid();
                });
            };

            this.addColumn = function (column) {
                $scope.columns.push(column);

                if (column.enableAggregateFilter) {
                    $scope.aggregateFilterQuery += ($scope.aggregateFilterQuery ? " or " : "") + "contains(" + column.dataitem + ", '{{search}}')";
                }
            }
        }]
    };
});

试试这个：

<div ng-repeat="item in data">
    <div ng-repeat="col in columns">
        {{col(item)}}
    </div>
</div>

---

用指令plsI更新您的代码片段我不明白为什么要使用只有一个条目的列数组。我认为你需要重新考虑一下策略。根据目前的情况，您可以将{{item.firstName}{{{item.lastName}}放在整个嵌套div的位置，这样就可以工作了。所需的结果是什么？如果您只需要两个col，分别是firstname和lastname，那么它只是数据中的一个ng repate项，其中item.firstname/item.lastname为变量。在本例中，我简化了代码，使问题更加清楚。实际上，这些列可能会有所不同，可能会更复杂，但方法将与本例相同。这不会达到我想要的效果。我希望能够从html中提取列的结构。我希望能够获取的内容，并根据datagrid指令的范围进行呈现

<div ng-repeat="item in data">
    <div ng-repeat="col in columns">
        {{col(item)}}
    </div>
</div>

$scope.columns = [
    function(item) { return item.firstName + ' ' + item.lastName; }
];