在AngularJS中，如何删除使用$compile创建的元素？

我编写了一个简单的示例，其中我使用$compile动态创建了一个元素。这个新元素有另一个按钮，我想用它删除这个元素（我已经读到，销毁作用域/元素以避免泄漏是好的）。但是函数closeThisElement（）不起作用；请帮忙

请参见此处的plunker：

同时复制以下部分代码：

link: function($scope, $element) {
    function closeThisElement(){
        $element.remove();
    }
    function addComment(){
        $element.append($compile('<div class="publishComment"><input type="text" ng-model="contentForReply"/><button ng-click="publishReply(contentForReply); closeThisElement()">Publish Reply</button></div>')($scope));
    }
    $scope.addComment = addComment;
}

链接：函数（$scope，$element）{
函数closeThisElement（）{
$element.remove（）；
}
函数addComment（）{
$element.append（$compile（'Publish Reply'）（$scope））；
}
$scope.addComment=addComment；
}

它们必须在$scope上。目前，它们只是链接可用的函数，但不在html中。试试这个

$scope.closeThisElement = closeThisElement;

要仅删除已编译的组件，请保存实例并使用该实例

link: function($scope, $element) {
    var newElement;
    function closeThisElement(){
        newElement.remove();
    }
    function addComment(){
        newElement = $compile('<div class="publishComment"><input type="text" ng-model="contentForReply"/><button ng-click="publishReply(contentForReply); closeThisElement()">Publish Reply</button></div>')($scope);
        $element.append(newElement);
    }
    $scope.addComment = addComment;
    $scope.closeThisElement = closeThisElement;
}

链接：函数（$scope，$element）{
var新元素；
函数closeThisElement（）{
newElement.remove（）；
}
函数addComment（）{
newElement=$compile（$Publish-Reply））（$scope）；
$element.append（newElement）；
}
$scope.addComment=addComment；
$scope.closeThisElement=closeThisElement；
}

---

值得一提的是，您可以使用ng show或ng hide而不必编译新元素，而不必创建和删除新元素。

您可以在指令配置中使用

模板

或

模板URL

：

app.directive('mydirective', function(){
    return {
        // other configuration
        restrict: 'E',
        template: '<div ng-repeat="comment in comments">' +
                       '<div>{{comment.hello}}</div>' +
                       '<button type="button" ng-click="removeComment(comment)"></button>' +
                   '</div>',
        link: function(scope, element, attrs){
            scope.comments = [{ hello: 'bonjour' }, { hello: 'konichiva' }];

            scope.removeComment = function(comment){
                scope.comments.splice(scope.comments.indexOf(comment), 1);
            }
        }
    };
});

app.directive（'mydirective'，function（）{
返回{
//其他配置
限制：'E'，
模板：“”+
“{comment.hello}”+
'' +
'',
链接：函数（范围、元素、属性）{
scope.comments=[{hello:'bonjour'}，{hello:'konichiva'}]；
scope.removeComment=函数（注释）{
范围注释拼接（范围注释索引，1）；
}
}
};
});

函数closeThisElement必须是$scope的一部分，才能在HTML中计算：

$scope.closeThisElement=closeThisElement

不过，Angular的link函数中的
$element
引用了指令元素本身

$element.remove（）
将从DOM中删除该指令。您可以使用
angular.element（）
（jQuery-lite的别名）查找附加的内容并删除该内容以保留tk listview元素。
问题在于，这样会将其链接到父元素的作用域，从而消除整个父元素。我只想删除$compile创建的元素。我理解ng repeat已经是“继承”范围，所以设置scope:true也不会有任何影响。如果我用scope:{}隔离scope，它也不起作用。谢谢你的关注。我用你更新的代码试过了，但是现在，没有任何元素被删除。是的，ng显示/隐藏是一个选项。但我真的在努力理解作用域和编译。我已经将我需要解决的更复杂的问题抽象到这个简化的例子中。@KayaToast。我的问题是，我错误地保存了元素。我修复了它，现在应该可以工作了。我再试了一次，在这里看到新的plunk：但是元素没有被删除。@KayaToast将Angular更改为Angular，它工作得很好，或者实际上看起来它已经是Angular元素了。更好的是，把它拿出来。谢谢你的替代方法。但我真的想了解作用域和编译是如何工作的。具体来说，我想了解如何删除嵌套在ng repeat中的这个编译元素。@KayaToast编译元素是转换为jQuery元素的实际字符串。这不是angularjs做事情的好方法，如果这确实是angularjs的方法，那就很奇怪了。比如说，如果我在ng repeat中有100个项目，并且在该模板中有2个链接，每个链接可以创建一个指令，那么我需要预先填充200个元素。如果它们被进一步嵌套，那么就更是如此。还有与它们相关的作用域等等。似乎效率很低。@KayaToast重新呈现html是angularjs的方式，它的性能较差，但代码更漂亮、结构化和可读性更好。我认为当angularjs无法完成某些特定任务时，必须使用jQuery