Frage element.replaceWith in einer benutzerdefinierten Direktive-Verknüpfung funktioniert nur beim ersten Aufruf


Ich bin neu in Angularjs und verstehe nicht zu viel hinter der Szene. Im Grunde möchte ich eine "E" -Kink-Direktive erstellen, die auf den Daten im Controller basiert. Ich erstelle den HTML-Code dynamisch, wie eine ganze 'Tisch' -Ding, um die Direktive zu ersetzen.

Das direkte in meiner HTML-Datei ist wie folgt:

<matrixrows></matrixrows>

Mein Anweisungscode ist wie folgt:

angular.module('matrix', [.....])
.directive('matrixrows', [..., function (...) {
        return {
            restrict: 'E',
            replace: true,
            require: '^matrix',
            link: function (scope, element, attr, ctrl) {
                ......... 
                scope.$watch('currentPage', function (newValue, oldValue) {
                    if (newValue && newValue != oldValue) {

                        var html = "";
                        .......................
                        here is the code to generate the html
                        .......................
                        element.replaceWith(html);
                    }
                });
             }
    }])

Durch Beobachtung aktuelle SeiteIch ändere den HTML-Code neu und ersetze das Direktive-Tag. Wenn ich zum ersten Mal 'currentPage' ändere, element.replaceWith (html) funktioniert gut. Dann ändere ich 'currentPage angin', die Watching-Funktion wird ausgelöst, aber die element.replaceWith (html) wird nicht funktionieren.

Dann ging ich in Angularjs Quellcode, ich fand, nach der ersten Ausführung von element.replaceWith, Element [0] .parentNode wurde Null, das verursachte die ersetzen mit Absturz.

Jeder weiß, wie es funktioniert?


9
2017-07-12 23:55


Ursprung


Antworten:


Es sieht so aus, als ob Sie versuchen, dasselbe Element mehrmals zu ersetzen. Aber sobald es ersetzt wurde, ist es weg. Um dieses Problem zu lösen, speichern Sie den aktuellen HTML-Code in einer Variablen. Etwas wie das:

        link: function (scope, element, attr, ctrl) {
            ......... 
            var currentElement = element;
            scope.$watch('currentPage', function (newValue, oldValue) {
                if (newValue && newValue != oldValue) {
                    .......................
                    var html = "";
                    here is the code to generate the html
                    .......................
                    var replacementElement = angular.element(html);
                    currentElement.replaceWith(replacementElement);
                    currentElement = replacementElement;
                }
            });
         }

13
2017-07-13 00:49



Sie sollten $ compile (...) für die generierte HTML-Zeichenfolge verwenden.

Ex:

    link: function (scope, element, attr, ctrl) {
        ......... 
        var currentElement = element;
        scope.$watch('currentPage', function (newValue, oldValue) {
            if (newValue && newValue != oldValue) {
                .......................
                var html = "";
                here is the code to generate the html
                .......................
                var replacementElement = $compile(html)(scope);
                currentElement.replaceWith(replacementElement);
                currentElement = replacementElement;
            }
        });
     }

2
2017-09-29 15:19