Question

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

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))
      }
    }
  })

预期结果应该是这样的，它就像：

<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 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>

因此，这些额外的td会创建包含空白值的其他列，并且整个表出错。

Answer 1

据我所知，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));
    });
  }
}

element.replace在更新模型时，在AngularJS指令中没有按预期工作

1 个答案: