javascript - 添加新数组项时，使用外部模板重复的 angularjs 指令无法正确呈现。

Question

以下 fiddle 呈现 3 列递增数字，代表具有不同模板的指令:一列内联，一列预加载，一列来自外部模板。当您选择“添加”按钮时，列会增加。当添加按钮将新项目推送到现有数组时，表示带有外部模板的指令的列似乎创建了一个新数组，然后抛出以下错误:

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

Answer 1

我通过将指令包装在父元素中并将 ng-repeat 移动到父元素来解决这个问题。任何关于为什么这会产生影响的见解仍然会受到赞赏。

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

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