web-dev-qa-db-ja.com

AngularJSで、$ compileを使用して作成された要素を削除するにはどうすればよいですか？

$ compileを使用して動的に要素を作成する簡単な例を作成しました。この新しい要素には別のボタンがあり、このボタンを使用してこの要素を削除します（リークを回避するためにスコープ/要素を破棄することをお勧めします）。しかし、関数closeThisElement（）は機能していません。助けてください。

ここでプランカーを参照してください： 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;
}
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
10
Kaya Toast

それらは$ 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;
}

新しい要素を作成して削除するのではなく、ng-showまたはng-hideを使用でき、コンパイルする必要がないことは言及する価値があるかもしれません。

10
Zack Argyle

関数closeThisElementは、HTMLで評価するために$ scopeの一部である必要があります。

_$scope.closeThisElement = closeThisElement;_

ただし、Angularのリンク関数の_$element_は、ディレクティブ要素自体を参照します。

$element.remove()は、DOMからディレクティブを削除します。 angular.element()（jQuery liteのエイリアス）を使用して、追加されたコンテンツを検索し、それを削除してtk-listview要素を保持できます。

1
johntayl

ディレクティブ構成では、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);
            }
        }
    };
});
0
karaxuna