Errore di tipo: Impossibile leggere la proprietà "childNodes" di indefinito

Question

Sto tentando di visualizzare una modale quando viene caricata la vista.

Codice:

//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"); 
} 
}]) 

Tutto funziona bene e viene visualizzato il modal ma ottengo questo errore sulla console:

Type error : Cannot read property 'childNodes' of undefined 

Non ho idea del perché questo sta succedendo. Anche se rimuovo il "modulo" dal modale, non ricevo alcun errore. Quindi immagino che il problema sia con il modulo ma non sono in grado di risolverlo.

Grazie in anticipo.

Answer 1

Siamo spiacenti per la modifica. Il tuo HTML è ben formato? Verifica che tutti i tag corrispondano.

Nello snippet di codice, sembra che manchi un div di chiusura. controllare che - quello che chiude il controller div.

Answer 2

Ho avuto lo stesso problema e sono riuscito a risolverlo avvolgendo la funzione di apertura modale all'interno di una funzione $ timeout() o una normale funzione setTimeout().

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

Answer 3

Ho avuto lo stesso messaggio di errore quando si tenta di utilizzare un plug-in JQuery. L'esecuzione dopo che il documento è pronto ha risolto il problema per me. Il plug-in funzionava correttamente ma il codice angolare seguito nell'attuale ambito non lo era.

Era il "set timeout" -answer in questo thread che mi ha portato a provare questa soluzione.

soluzione per me:

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

Answer 4

ho avuto un problema simile. Avrebbe generato un'eccezione quando ho provato ad aggiungere un html a dom e lo compilavo usando $ compile in angularJs.

All'interno del HTML è stato un'altra direttiva che ha cercato di aggiungere qualche elemento DOM dalla pagina da qualche altra parte nella pagina.

Ho appena dovuto chiamare .clone di quell'elemento prima di spostarlo nella nuova posizione. E l'eccezione era sparita.

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

Answer 5

Come un'altra soluzione nel contesto AngularJS sto usando questo approccio:

1. Includere modulo $timeout nel controller JS
2. Run init() funzione con tutti gli inizializzatori come questo:

   $ timeout (init, 0);

opere buone.