Question

编辑：此处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从用户界面消失，ele1仍在加载iframe

这不是：

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

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

elements.remove(ele1)

结果：ele1从用户界面消失，ele2仍然存在iframe，但iframe内容又恢复为空，iframe.load()被解雇。

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

Answer 1

您需要在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

在AngularJS中删除ngRepeat使用的对象时会发生什么？

1 个答案: