Typfehler: Eigenschaft 'ChildNodes' von undefined kann nicht gelesen werden

Question

Ich versuche, ein Modal anzuzeigen, wenn die Ansicht geladen wird.

Code:

//View 
<div id="showCom" ng-controller="showmodalCtrl" ng-init="init()"> 

<div class="modal fade" id="companyModal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Please Select Company</h4> 
    </div> 
    <div class="modal-body"> 
    <form> 
     <div class="form-group"> 
     <label class="control-label">Recipient:</label> 
     <input type="text" class="form-control"> 
     </div> 
    </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-primary">Submit</button> 
    </div> 
    </div> 
</div> 
</div> 

//Controller 
.controller('showmodalCtrl', ['$scope', function($scope){ 

$scope.init = function(){ 
    $('#companyModal').modal("show"); 
} 
}]) 

Alles funktioniert gut und die modale angezeigt wird, aber ich bekomme diese Fehlermeldung auf der Konsole:

Type error : Cannot read property 'childNodes' of undefined 

Ich habe keine Ahnung, warum diese es passiert. Auch wenn ich das "Formular" aus dem Modal entfernen, bekomme ich keinen Fehler. Ich denke, das Problem liegt in der Form, aber ich kann es nicht lösen.

Vielen Dank im Voraus.

Answer 1

Entschuldigung für die Bearbeitung. Ist Ihr HTML gut formatiert? Überprüfen Sie, ob alle Tags übereinstimmen.

In Ihrem Code-Snippet sieht es so aus, als würden Sie ein schließendes Div. überprüfen Sie das - das, das den Controller div schließt.

Answer 2

Ich hatte das gleiche Problem und es gelang mir, es aufzulösen, indem die modal open Funktion innerhalb einer $ timeout() oder einer normalen setTimeout() Funktion eingeschlossen wurde.

setTimeout(function(){ 
    jQuery('#messageModal').modal('show'); 
}, 0); 

Answer 3

Ich hatte die gleiche Fehlermeldung beim Versuch, ein JQuery-Plugin zu verwenden. Ich habe es ausgeführt, nachdem das Dokument fertig war. Das Plugin lief einwandfrei, aber der Winkelcode im aktuellen Bereich war nicht korrekt.

Es war die "Set Timeout" -Antwort in diesem Thread, die mich dazu brachte, diese Lösung zu versuchen.

Lösung für mich:

angular.element(document).ready(function() { 
    //Angular breaks if this is done earlier than document ready. 
    setupSliderPlugin(); 
}); 

Answer 4

hatte ich ein ähnliches Problem. Es würde eine Ausnahme auslösen, wenn ich versuchte, dom etwas html hinzuzufügen und es mit $ compile in angularJs zu kompilieren.

Innerhalb des HTML war eine andere Richtlinie, die einige dom Element aus der Seite irgendwo sonst auf der Seite hinzuzufügen versucht.

Ich musste einfach .clone dieses Elements aufrufen, bevor ich es an den neuen Speicherort verschoben habe. Und die Ausnahme war weg.

$popupContent = $(attrs.popupSelector).clone(); 
$container = $('<div class="popup-container"></div>'); 
$container.append($popupContent); 
$container.hide(); 
$('body').append($container); 

Answer 5

Als eine andere Lösung in AngularJS Kontext ich diesen Ansatz bin mit:

1. Fügen $timeout Modul in Ihrem JS Controller
2. Run init() Funktion mit allen initializers wie folgt aus:

   $ timeout (init, 0);

funktioniert gut.