Type error : Cannot read property 'childNodes' of undefined

Question

I am trying to display a modal when the view is loaded.

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

Everything works fine and the modal is displayed but I get this error on the console :

Type error : Cannot read property 'childNodes' of undefined

I have no idea why this is happening. Also if I remove the "form" from the modal , i don't get any error. So I guess the problem is with the form but I am not able to resolve it.

Thanks in advance.

Answer 1

I had the same problem and I managed to resolve it by wrapping the modal open function inside a $timeout() or a normal setTimeout() function.

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

Answer 2

I had the same error message when trying to use a JQuery plugin. Running it after document ready resolved the issue for me. The plugin was running fine but the angular code that followed in the current scope was not.

It was the "Set timeout"-answer in this thread that led me to try this solution.

Solution for me:

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

Answer 3

As another solution in AngularJS context I'm using this approach:

1. Include $timeout module in your JS controller
2. Run init() function with all initializers like this:

   $timeout(init, 0);

Works good.

Answer 4

Sorry for edit. Is your HTML well formed? Check that all the tags match.

In your code snippet, it looks like you're missing a closing div. check that - the one that closes the controller div.

Answer 5

I had a similar problem. It would throw an exception when i tried to add some html to dom and compile it using $compile in angularJs.

Inside of the html was another directive that tried to add some dom element from the page to somewhere else in the page.

I just had to call .clone of that element before i moved it to the new location. And the exception was gone.

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