更新模型时，element.replaceWith未按AngularJS指令中的预期工作

所以我有一个包含对象的数组：

var columns= [{label:"Column 1",value:"val 1"},{label:"Column 2",value:"val 2"}];

我有一个指令作为表数据元素的属性

<td ng-repeat="column in columns" my-directibe column="column.label", value="column.value">

这是指令：

    .directive("queryResult", function ($compile) {
    return {
      scope: {
        value:"=",
        column:"="
      },
      restrict: "AE",
      link:function(scope,elemnt){
        var tableData=angular.element('<td ng-bind="value"></td>');
        elemnt.replaceWith($compile(tableData)(scope))
      }
    }
  })

指令（“queryResult”，函数（$compile）{ 返回{ 范围：{ 值：“=”， 列：“=” }, 限制：“AE”， 链接：功能（范围、要素）{ var tableData=角度元素（“”）； 元素替换为（$compile（tableData）（范围）） } } }) 预期结果应该是这样的，它是这样的：

<td class="ng-scope">val 1</td>

val 1

当我向数组中添加额外的结果时，问题就出现了，数组变成了三个元素。那么这只适用于最后添加的元素，对于前两个元素，如下所示：

<td query-result ng-repeat="column in columns" value="value" column="column" class="ng-scope ng-isolate-scope"></td>
<td class="ng-scope">val 1</td>

<td query-result ng-repeat="column in columns" value="value" column="column" class="ng-scope ng-isolate-scope"></td>
<td class="ng-scope">val 2</td>

<td class="ng-scope">val 3</td>

瓦尔1
val 2
val 3

---

因此，这些额外的td会创建带有空白值的额外列，而整个表会出错。

据我所知，

elemnt.replaceWith

将只执行一次，因此绑定根本不起作用

试试这个：

return {
  scope: {
    value:"=",
    column:"="
  },
  restrict: "AE",
  link:function(scope,elemnt){
    var tableData=angular.element('<td ng-bind="value"></td>');
    scope.$watch('value', function() {
        elemnt.replaceWith($compile(tableData)(scope));
    });
  }
}

返回{
范围：{
值：“=”，
列：“=”
},
限制：“AE”，
链接：功能（范围、要素）{
var tableData=角度元素（“”）；
作用域：$watch（'value'，function（）{
元素替换为（$compile（tableData）（scope））；
});
}
}

这不起作用，因为您正在监视值。我没有更改对象的值，而是更改对象所在的数组。从问题描述中，有一列是右数组。所以我要改变它。正如您所看到的，我没有将其传递给指令，因此没有办法监听该更改。请尝试包装

elemnt.replaceWith（$compile（tableData）（scope））

inside

$timeout

函数将起作用