La direttiva ripetuta angularjs con modello esterno non viene visualizzata correttamente quando vengono aggiunti nuovi elementi dell'array.

Question

Il seguente violino esegue il rendering di 3 colonne di numeri incrementali che rappresentano le direttive con modelli diversi: uno in linea, uno precaricato e uno da un modello esterno. Quando si seleziona il pulsante "aggiungi", le colonne aumentano. La colonna che rappresenta una direttiva con un modello esterno sembra creare un nuovo array quando un pulsante Aggiungi inserisce un nuovo elemento nell'array esistente e quindi genera il seguente errore:

TypeError: Impossibile chiamare il metodo 'insertBefore' di null

Qualche idea su cosa sta succedendo?

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' 
    } 
}); 

Answer 1

Ho risolto il problema avvolgendo la direttiva in un elemento genitore e muovendo il ng-repeat all'elemento genitore. Qualsiasi comprensione del motivo per cui questo fa la differenza sarebbe comunque apprezzato.

http://jsfiddle.net/jwanga/EaRHD/13/

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

Answer 2

ho ottenuto lo stesso messaggio quando stavo cercando di aggiornare un div con il contenuto HTML di un editor di testo ricco. Ma non come nel tuo caso, il mio ng-repeat era già l'elemento genitore!

Bene, il problema è stato causato perché l'elemento con cui avevo bisogno di lavorare (all'interno della ng-repeat) non era ancora presente. E 'stato risolto con solo l'aggiunta di una semplice funzione di timeout come questo:

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

Speranza che aiuta qualcun altro, evviva!