Question

我使用基于附加到范围的对象（实际上是一个对象数组）的链接函数动态构建表体的行（和子行）。

这里是对象的结构：

$scope.data.results = [
    {
        selected: false
        name: ,
        description: ,
        ... // plus some other object properties
    }, ... // and so on
]

这是我的指示：

app.directive('dynamicTbody', ['$compile', function($compile) {
    restrict: 'A',
    link: function(scope, element, attrs) {

        scope.$watch(function(scope) {
            return scope.results;
        }, function(newValue, oldValue) {

            var tbody = '<tbody>';

            angular.forEach(newValue, function(result, index) {

                tbody +=    '<td><input type="checkbox" ng-model="what to put here for result.selected"></td>' +
                            '<td>' + result.name + '</td>' +
                            '<td>' + result.description + '</td>' +
                            // ... add column for other object properties


            });

            tbody += '</tbody>';

        });

        var existing_tbody = element.find('tbody');
        if (existing_tbody) {
            angular.element(existing_tbody).remove();
        }

        var tbody_elem = angular.element(tbody);
        var compile_tbody = $compile(tbody_elem);
        element.append(tbody_elem);
        compile_tbody(scope);
    });

});

这是我的HTML：

<table dynamic-tbody>
    <thead>
        ...
    <thead>
</table>

显示行工作正常，尤其是当我尝试执行等效的表达式{{}}时。但是，我有复选框部分的问题。当我使用ng-model或ng-click等角度指令时，如何引用result.selected？

感谢您的意见。

Answer 1

如果您需要在用户更改复选框的值时更新模型，则您的代码不是Angular-way。

我建议您使用模板而不是$ compile服务。 Angular-way使您的代码非常简单。

您可以在模板中编写如下HTML。

<table>
    <tr ng-repeat="row in results">
        <td><input type="checkbox" ng-model="row.selected"></td>
    </tr>
</table>

我设置jsfiddle。

使用$ compile时引用范围变量

1 个答案: