Angularjs: TypeError: Cannot call method 'insertBefore' of null

Question

Please find the fiddle here http://jsfiddle.net/UxYLa/6/

This is a simplified form of what I am trying to do. There are two directive, and the nested one, subDirec

Answer 1

It has something to do with the compilation and how data is bound. I made a working version here: http://jsfiddle.net/UxYLa/9/

The main differences are in b.html

  <div ng-if="data.values">
      <div ng-repeat="itm in data.values">
          <input name='{{itm.name}}' id='{{itm.name}}' ng-model="itm.name" type='text'></input>
      </div>
  </div>

Have to interate over arrays and refer to itm instead of model since it's in the scope.

Edit: after some digging here are some more clues as to why the error happens, but not when you wrap it in a div. It is calling this: parent.insertBefore(node, index.nextSibling); where parent is element.parent of your ng-repeat. If you don't have the wrapper, the parent is null.

This means the error occurs whenever the html you are compiling has a watch that is on the outside of the template when directly changing the element.

I also made a solution that doesn't attempt to change element directly, but rather appends the compiled element to it. So that everything, when it's checked in the digest cycle will have a proper structure. http://jsfiddle.net/UxYLa/12/

Hope this helped.

Answer 2

I had the same error message. I could fix this by referencing JQuery before Angular in my html script tags.

Answer 3

I had the same problem when using UI-Router and the A tag had the wrong URL in the href attribute which was not a route.

Answer 4

I had the same issue, but I found I was adding class="md-sticky" on a <md-subheader> tag, and it meant to say class="md-no-sticky"

As soon as I changed this class, that sorted the problem for me, but I also had the same issue with using an ng-repeat not within it's own parent tag, but I had! It was just I used ng-show="condition" on that parent tag, and if that parent tag didn't show it would cause this issue, so I changed it to ng-if="condition" and that sorted that problem.

Answer 5

I had the exact same problem, and what seemed to solve it was removing a class of "ng-view" that I had on one of my divs. It's like it was causing a conflict.

I had:

<div class="ng-view"> 
  <div ng-view>
    ...

Then changed to:

<div class="ngview">
  <div ng-view>
    ...

I'm guessing ng-view is a reserved word, but I didn't think it would be affected when used as a class.