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"]'

一切都很好。

当我从模型中(在控制器中)删除其中一个元素时,例如:

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) 

结果:ele2从 UI 中消失,ele1仍然存在加载 iframe

这不会:

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

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

elements.remove(ele1) 

结果:ele1从 UI 中消失,ele2仍然存在 iframe,但 iframe 内容恢复为空,iframe.load()并被触发。

这里发生了什么?为什么我的 iframe 会被重置?

4

1 回答 1

0

您需要在 load() 中添加加载逻辑,以便在 DOM 更改时重新加载内容。

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 回答