添加新數組項目時，重複使用外部模板的angularjs指令無法正確呈現。

以下小提琴呈現了3列遞增數字，表示具有不同模板的指令：一個內聯，一個預加載，一個來自外部模板。當你選擇「添加」按鈕的列增量。當添加按鈕將新項目推送到現有數組時，表示帶有外部模板的指令的列似乎會創建一個新數組，然後拋出以下錯誤：添加新數組項目時，重複使用外部模板的angularjs指令無法正確呈現。

TypeError：無法調用null的方法'insertBefore'

任何想法是怎麼回事？

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

來源

2013-02-10 jwanga

我已經通過包裝在一個父元素的指令和移動NG-重複父元素解決了這個問題。任何洞悉，爲什麼這有所作爲仍然不勝感激。

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

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

來源

2013-02-10 06:18:02 jwanga

我也很好奇！ – 2013-02-10 09:58:10

這也解決了我的問題。我想知道爲什麼這也是。 – Jeppebm 2013-07-19 12:55:17

我得到當我試圖更新富文本編輯器的HTML內容div的，相同的消息。但不是在你的情況，我的重複已經是父元素！

嗯，問題是由於我需要使用的元素（在ng-repeat內部）尚未出現而引起的。它解決了只需添加一個簡單的超時功能像這樣的：

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

希望它可以幫助別人，乾杯！

來源

2013-10-10 12:18:46

添加新數組項目時，重複使用外部模板的angularjs指令無法正確呈現。

回答

相關問題