angularjs - 如何使用 ngModel 编译指令中的元素？

Question

我正在尝试构建一个可编辑的表格单元格，但是有一些条件决定它是否可编辑，因此我不能只在模板中包含输入。我的目标是让单元使用与单元相同的模型创建输入，但它似乎不起作用。

HTML:

<td editable-grid-cell ng-model="batch.amount" name="amount"></td>

指令代码:

.directive('editableGridCell', function($compile) {
    return {
        link: function(scope, ele, attrs) {
            scope.field = attrs.ngModel;
            ele.append($compile('<input type="text" class="form-control" ng-model="field"/>')(scope));
        }
    }
})

执行此操作会导致输入填充“batch.amount”。我通过使用隔离范围来实现此目的:

scope: {
  model: '=ngModel'
}
...
ele.append($compile('<input type="text" class="form-control" ng-model="model"/>')(scope));

但是，我需要访问父作用域，因为我在 Controller 中设置了所有表选项，因此我认为隔离作用域在这里不起作用。

感谢您的帮助!

Answer 1

您可以通过范围将所有表格选项传递给可编辑的网格单元指令

scope: {
  model: '=ngModel',
  tableOptions: '='
}

或者如果您不想使用隔离范围，则可以使用 attrs 创建 html

.directive('editableGridCell', function($compile) {
    return {
        link: function(scope, ele, attrs) {
           var html = '<input type="text" class="form-control" ng-model="';
           html += attrs.ngModel;
           html += '"/>';
            ele.append($compile(html)(scope));
        }
    }
})