javascript - 通过点击 angularJS 删除元素

Question

我正在尝试使用指令删除元素

我找到了一个有效的例子 http://jsfiddle.net/qDhT9

我尝试附加一个新元素并将其作为 http://jsfiddle.net/qDhT9/140

var app = angular.module('myApp', []);
    app.directive('removeOnClick', function() {
        return {
            link: function(scope, elt, attrs) {
                scope.remove = function() {
                    alert('here');
                    elt.html('');
                };
                elt.append('<a href class="close" style="float:right;padding-right:0.3em" ng-click="remove()">&times;</a>');
            }
        }
    });

但是这个

其中一个不起作用。

为什么以及如何使第二个起作用。

Answer 1

您需要对插入的任何包含 Angular Directive(指令)的 html 使用 $compile:

app.directive('removeOnClick', function($compile) {
    return {
        link: function(scope, elt, attrs) {
            scope.remove = function() {
                alert('here');
                elt.html('');
            };
            var link = $compile('<a href class="close" ng-click="remove()">LINK</a>')(scope)
            elt.append(link);
        }
    }
});

另请注意，大多数时候您可以通过管理模型数据并删除数据并让 Angular 管理 dom 来进行此类删除。例如，删除 ng-repeat 中的一行，您可以使用按钮从数据数组中删除该项目，然后 Angular 会为您从 dom 中删除它

DEMO