11

次のフィドルは、異なるテンプレートを持つディレクティブを表す3列の増分番号をレンダリングします。1つはインライン、1つはプリロード、もう1つは外部テンプレートからのものです。「追加」ボタンを選択すると、列が増加します。外部テンプレートを使用してディレクティブを表す列は、追加ボタンが新しいアイテムを既存の配列にプッシュすると、新しい配列を作成し、次のエラーをスローするようです。

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 に答える