angularjs - 使用 Angular 指令在 iFrame 中拖放

Question

我需要一些控件来使用跨 iFrame 的拖放操作。我需要 iframe 中的功能的原因是因为它是我们正在构建的 CMS，并且“编辑页面”中的任何“绝对”CSS 更改也会影响主站点。

我已经编写了一个 Angular 指令并为此构建了一个小原型(prototype)，只要它在同一页面上，它就可以完美运行，但是当我尝试跨 iframe 执行相同操作时，它就是行不通。即使从 iFrame 页面注册 droppbale 也不会显示在控制台中(尝试通过指令登录时)。

它是一个 1 寻呼机代码，可在此处查看 - http://78.110.163.229/angDnd/outer.html

任何指导/建议都会非常有帮助。

Answer 1

似乎 iframe 的主体实际上从未成为 droppable。正文中有这段代码:

$(function () {
    $("#canvas-frame").ready(function (){
        var contents = $("#ifr").contents();
        var ifrBody = contents.find('body');
        //console.log(ifrBody);
        $(ifrBody).attr("dnd-droppable","true");
    })
});

它的(部分)问题如下:

1. 我没有看到任何 #canvas-frame 元素。

2. 即使有一个这样的元素，dnd-droppable 属性也会被添加到 iframe 的主体 after angular已经解析了DOM，所以根本不考虑。

---

解决方案:

在您的 HTML 中，在 iframe 元素上添加一个新指令:

<iframe id="ifr" src="inner.html" dnd-droppable-iframe></iframe>

在您的 JS 中，定义新指令，以便它等待加载 iframe，然后将 dndDroppable 指令添加到其主体元素并编译它，因此Angular 可以“捡起来”:

dndApp.directive('dndDroppableIframe', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            if (elem.prop('tagName') !== 'IFRAME') { return; }

            elem.ready(function () {
                var ifrBody = elem.contents().find('body');
                ifrBody.attr('dnd-droppable', '');
                $compile(ifrBody)(scope);
            });
        }
    };
});