0

編集: jsFiddle の例はこちら。

をngRepeat含むディレクティブを生成する がありiframesます。

div(ng-repeat='element in elements')
    ng-switch(on="element.type") 
        a-directive(ng-switch-when="something")
        another-directive(ng-switch-when="somethingElse")

さて、ディレクティブ内で、次のようにして、何らかのイベントの後にコンテンツを iframe にロードしています。

$iframe[0].contentWindow.d_contents = "html"
$iframe[0].src = 'javascript:window["d_contents"]'

すべてがうまく機能します。

これらの要素の 1 つをモデル (コントローラー内) から削除すると、次のようになります。

elements.remove(object) //using sugarjs, that's not the issue, same behaviour with splice

それに応じて UI が更新されます。つまり、要素が消えます。

問題

これは期待どおりに機能します。

elements.push(ele1)
elements.push(ele2)

.. init iframes inside ele1 and ele2 with content ..

elements.remove(ele2)

結果: ele2UI から消えele1ますが、iframe がロードされたままです

これはしません:

elements.push(ele1)
elements.push(ele2)

.. init iframes inside ele1 and ele2 with content ..

elements.remove(ele1)

結果: ele1UI から消えele2ますが、iframe は残っていますが、iframe のコンテンツは空に戻り、iframe.load()起動されます。

ここで何が起きてるの？iframe がリセットされるのはなぜですか?

4

1 に答える 1

0

DOM が変更されたときにコンテンツをリロードするには、 load() 内に読み込みロジックを追加する必要があります。

var linkfn = function (scope, element, attrs) {
    init(function () {
        var $iframe = element.find("iframe")

        var refresh = function () {
            var doc = $iframe[0].contentWindow.document;
            doc.open();
            doc.write(scope.ele.source);
            doc.close();
        }

        $iframe.load(function () {
            console.log(scope.ele.id + ": loaded ");

            //refreshing
            refresh();
        });

        //initial loading
        refresh()
    })
}

このシナリオで使用する必要がありdoc.write()ます。そうしないと、再帰ループ エラーが発生します。

DEMO

于 2013-08-26T19:07:10.537 に答える