Javascript element.append不适用于angular js中的自定义指令

我正在尝试创建动态表数据。正如我们现在为tr重复ng一样，我尝试在tr for td下进行一次迭代，但html并没有呈现

创建自定义数据指令

.directive('customData', function($compile, $sce) {
    return {
        replace: true,
        link: function($scope, element, attributes) {
            var expression = $sce.parseAsHtml($scope.headerObj.printModel);
            var getResult = function () {
                 return expression($scope);
            };

            $scope.$watch(getResult, function (newValue) {
                 console.log(newValue);
                 element.append($compile(newValue)($scope));
            });
        }
    };
});

---

在控制台日志中，我得到了所需的实际值。但html视图并没有显示任何值。我认为element.append函数不起作用。

删除

replace:true

属性：

.directive('customData', function($compile, $sce) {
    return {
        ̶r̶e̶p̶l̶a̶c̶e̶:̶ ̶t̶r̶u̶e̶,̶
        link: function($scope, element, attributes) {
            var expression = $sce.parseAsHtml($scope.headerObj.printModel);
            var getResult = function () {
                 return expression($scope);
            };

            $scope.$watch(getResult, function (newValue) {
                 console.log(newValue);
                 element.empty();
                 element.append($compile(newValue)($scope));
            });
        }
    };
});

replace:true

属性已被弃用，并且由于该指令未提供用于替换的模板，因此不需要该属性

样本数据：

app.controller("ctrl", function($scope) {
  $scope.taskCodeData = [{x:19}];
  $scope.headerList = [{
    printModel:"data1",
  }];
  $scope.data1 = `<div>x={{taskCode.x}}</div>`;
})

app.controller（“ctrl”，函数（$scope）{
$scope.taskCodeData=[{x:19}]；
$scope.headerList=[{
printModel:“数据1”，
}];
$scope.data1=`x={{{taskCode.x}}}`；
})

从文档中查看：

append（）

-与jQuery相反，这不会克隆元素，因此在包含多个DOM节点的jqLite对象上调用时无法正常工作。