11

下面的小提琴呈现了 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'
    }
});
4

2 回答 2

6

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

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

<li ng-repeat="item in items"><item-3  data="item"></item-3></li>
于 2013-02-10T06:18:02.263 回答
1

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

好吧，问题是因为我需要使用的元素（在 ng-repeat 内部）还不存在。只需添加一个简单的超时功能就可以解决这个问题：

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

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

于 2013-10-10T12:18:46.317 回答