The following fiddle renders 3 columns of incrementing numbers representing directives with different templates: one inline, one preloaded, and one from an external template. When you select the "add" button the columns increment. The column representing a directive with an external template seems to create a new array when a the add button pushes a new item to the existing array, and then throw the following error:

TypeError: Cannot call method 'insertBefore' of null

Any ideas what is going on?

/

angular.module('app',[]).controller('controller', function($scope){

    $scope.items = [1,2,3,4,5,6,7,8,9];
    $scope.add = function(){

        $scope.items.push($scope.items[$scope.items.length - 1]+1);

    }

}).directive('item1', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        template:'<li>{{data}}</li>'
    }
}).directive('item2', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'item.html'
    }
}).directive('item3', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'.html'
    }
});

The following fiddle renders 3 columns of incrementing numbers representing directives with different templates: one inline, one preloaded, and one from an external template. When you select the "add" button the columns increment. The column representing a directive with an external template seems to create a new array when a the add button pushes a new item to the existing array, and then throw the following error:

TypeError: Cannot call method 'insertBefore' of null

Any ideas what is going on?

http://jsfiddle/jwanga/EaRHD/

angular.module('app',[]).controller('controller', function($scope){

    $scope.items = [1,2,3,4,5,6,7,8,9];
    $scope.add = function(){

        $scope.items.push($scope.items[$scope.items.length - 1]+1);

    }

}).directive('item1', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        template:'<li>{{data}}</li>'
    }
}).directive('item2', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'item.html'
    }
}).directive('item3', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'https://s3.amazonaws./thedigitalself-public/jsfiddle-EaRHD-template.html'
    }
});

• javascript
• angularjs

2 Answers 2

I've solved the issue by wrapping the directive in a parent element and moving the ng-repeat to the parent element. Any insight into why this makes a difference would still be appreciated.

http://jsfiddle/jwanga/EaRHD/13/

<li ng-repeat="item in items"><item-3  data="item"></item-3></li>

i got the same message when i was trying to update a div with the html content of a rich text editor. But not as in your case, my ng-repeat was already the parent element!

Well, the problem was caused because the element I needed to work with (inside of the ng-repeat) was not present yet. It was solved with just adding a simple timeout function like this one:

setTimeout(function() {
    $(mySelector).html(htmlContent);
},1);

Hope it helps someone else, cheers!