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

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 从 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 会被重置？

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