Question

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

TypeError：无法调用null

的方法'insertBefore'

任何想法发生了什么？

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>

Answer 2

当我尝试使用富文本编辑器的html内容更新div时，我收到了相同的消息。但不是在你的情况下，我的ng-repeat已经是父元素了！

嗯，这个问题是因为我需要使用的元素（ng-repeat内部）尚未出现。只需添加一个简单的超时函数就可以解决这个问题：

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

希望它可以帮助别人，干杯！

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

2 个答案: