In the code snippet below, you'll find a fiddle that displays 3 columns of numbers that increase in value. These columns represent directives with different templates: one inline, one preloaded, and one from an external template. When you click on the "add" button, the numbers in the columns increment. However, there seems to be an issue with the column representing a directive with an external template. It appears to create a new array when a new item is added by pressing the add button, resulting in the following error message:
TypeError: Cannot call method 'insertBefore' of null
Do you have any insights into what might be causing this problem?
http://jsfiddle.net/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.com/thedigitalself-public/jsfiddle-EaRHD-template.html'
}
});