为什么在 angularjs 中 .append 充当 .html？

Question

我正在尝试将新行附加到 table，其中现有行由 ng-repeat 创建。但是，当我点击添加新按钮评分器而不是添加新行时，它会删除现有行并添加新行。任何人都可以在这方面帮助我吗？

这是代码，fiddle link。

var app = angular.module("app", []);
app.controller("simpleController", function($scope)
 {
    var descriptions = ['item1','item2','tem3'];
     $scope.items = descriptions;

 });

app.directive("addRow",function($compile)
{
    var newRow;
    newRow = '<tr><td>New Description</td><td><a href="javascript:void(0)" add-row>+</a></td><td><a href="javascript:void(0)" delete-row>-</a></td></tr>';
    return{
        restrict: 'A',
        link: function(scope, element,attrs,controller){
            element.on("click", function() {
                console.log("clicked on activity add row");
                $compile(element.parent().parent().parent().append(newRow))(scope);
            });
        }
    }

Answer 1

每当我们想在angular元素中插入新元素时，直接用angular是无法理解的。首先，我们需要使用 $compile API 通过编译来运行该元素，然后将其附加到元素。

您需要像下面这样编写代码。您需要先 $compile 您的元素，然后将其附加到元素。

element.on("click", function() {
    console.log("clicked on activity add row");
    element.parent().parent().parent().append($compile(newRow)(scope));
});

Working Fiddle

根据@huanfeng 的观察，<tr> 没有正常工作，它被转换为 span。目瞪口呆后发现，有issue和AngularJS。要解决此问题，您可以使用问题 link.

中的任何有效解决方案

更新 1

您可以通过 more Simpler way

而不是附加元素

仅将变量压入 ng-repeat 数组，即 $scope.items.push('New Description')。 ng-repeat 将根据您指定的描述为您再渲染一个。

谢谢。

为什么在 angularjs 中 .append 充当 .html？

Why in angularjs .append is acting as .html?

angularjs

angularjs-directive