Question

我写了一个简单的例子，我使用$ compile动态创建一个元素。这个新元素有另一个按钮，我想要删除这个元素（我已经读过，破坏范围/元素以避免泄漏是很好的）。但函数closeThisElement（）不起作用;请帮忙。

请在此处查看plunker：http://plnkr.co/edit/js7mpUMndjZEdMvRMuZk?p=preview

同时复制以下部分代码：

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

Answer 1

他们必须在$范围内。目前，它们只是您的链接可用的功能，但不在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;
}

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

Answer 2

函数closeThisElement需要成为$ scope的一部分，以便在HTML中进行评估：

$scope.closeThisElement = closeThisElement;

但是，Angular链接函数中的$element引用了指令元素本身。

$element.remove()将从DOM中删除该指令。您可以使用angular.element()（jQuery lite的别名）查找附加内容并删除它以保留tk-listview元素。

Answer 3

您可以在指令配置中使用template或templateUrl：

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

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

3 个答案: