In AngularJS, wie kann ich Sie entfernen ein element erstellt durch Verwendung von $kompilieren?

Ich geschrieben habe, ein einfaches Beispiel, wo ich ein element erstellen, die dynamisch mit $compile. Dieses neue element hat einen anderen button, mit dem will ich zum entfernen dieses element (ich habe gelesen, dass es gut ist, zu zerstören, Bereich/Elemente zur Vermeidung von Leckagen). Aber die Funktion closeThisElement() funktioniert nicht; bitte um Hilfe.

Sehen plunker hier: http://plnkr.co/edit/js7mpUMndjZEdMvRMuZk?p=preview

Auch die Reproduktion Teil des Codes unten:

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;
}
InformationsquelleAutor Kaya Toast | 2014-03-28
  1. 10

    Sie haben, um über den $scope. Derzeit sind Sie nur Funktionen zur Verfügung, um Ihren link, aber nicht innerhalb des html-Codes. Dies versuchen.

    $scope.closeThisElement = closeThisElement;

    Beseitigen nur die kompilierte Komponente, speichern Sie die Instanz und verwenden.

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

    Es vielleicht erwähnenswert, dass eher als das erstellen und entfernen, ein neues element, die Sie verwenden konnte, ng-und ng-hide, und nie haben, um es zu kompilieren.

    • das problem ist das es links zu den übergeordneten Bereich und das gesamte übergeordnete element beseitigt bekommt. Ich will nur das element erstellt von $kompilieren beseitigt werden. Ich verstehe, ng-repeat ist schon 'Erben' Bereich, also Einstellung, Bereich: true, nicht sollte keine Auswirkungen haben entweder. Und wenn ich isolieren scope scope: {}, es nicht funktioniert entweder. Dank für das schauen hinein obwohl.
    • bearbeitet die post, hoffe, es hilft.
    • Ich versuchte es mit deinen aktualisierten code, aber jetzt, kein element wird immer entfernt. Ja, ng-show/hide option. Aber ich bin wirklich versucht, zu verstehen, Bereiche und kompilieren. Ich habe abstrahiert meiner komplizierteren problem, das ich brauchen, um in diesem vereinfachten Beispiel hier.
    • Meine schlecht, ich gespeichert, das element falsch. Ich repariert, sollte jetzt funktionieren.
    • Ich versuchte erneut, die neue plunk hier: plnkr.co/Bearbeiten/d2XMH2N2YIUrErq7mG0w?p=Album Vorhören, aber das element ist nicht immer entfernt.
    • änderung Winkel Winkel, und es funktioniert perfekt, oder eigentlich wie es aussieht, ist schon ein eckiges element. besser noch, nehmen Sie es heraus.
    • und so ist es nicht. Danke !

    InformationsquelleAutor Zack Argyle
  2. 1

    Die Funktion closeThisElement muss ein Teil der $scope für den es zu evaluieren, in Ihren HTML:

    $scope.closeThisElement = closeThisElement;

    Obwohl, die $element im Winkel-link-Funktion bezieht sich auf die Richtlinie-element selbst.

    $element.remove() wird, entfernen Sie die Richtlinie aus dem DOM. Sie können angular.element() (alias für jQuery-lite) zu finden, die angehängt Inhalte und zu entfernen, halten Sie die tk-listview-element.

    InformationsquelleAutor johntayl
  3. 0

    Können Sie template oder templateUrl in der Richtlinie Konfiguration:

    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);
            }
        }
    };
});
    • Danke für den alternativen Ansatz. Aber ich bin wirklich versucht zu verstehen, wie Umfang und kompilieren Arbeit. Ich möchte verstehen, speziell, wie kann ich diese entfernen kompiliert element, die Verschachtelung innerhalb von ng-repeat.
    • zusammengestellt element ist der eigentliche string, der konvertiert wird, jQuery element. Es ist nicht angularjs Art und Weise, Dinge zu tun, schön
    • Scheint merkwürdig, wenn das wirklich die AngularJS Weg. Sagen, wenn ich 100 Artikel in ng-repeat, und in dieser Vorlage gibt es 2 links, die kann jeder erstellen Sie eine Richtlinie, Dann muss ich mir vorab ausfüllen, 200 Elemente. Und wenn Sie weiter geschachtelt, dann noch mehr. Und es gibt Rahmen, die mit jedem von Ihnen usw. Scheint eher ineffizient.
    • rerendering html ist angularjs Weg, es ist weniger performant, aber viel mehr schön, strukturierten und lesbaren code. Ich denke, dass jQuery verwendet werden muss, wenn einige Besondere Aufgabe, auch nicht mit angularjs
    InformationsquelleAutor karaxuna
Schreibe einen Kommentar