angularjs - 使用 Angular Directive 在 iF​​rame 上拖放

Question

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

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

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

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

Answer 1

看起来iframe的主体实际上从未被制成可删除。 正文中有这么一段代码:

$(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 属性也会在 after Angular 之后添加到 iframe 的主体中已经解析了 DOM，所以根本不考虑它。

---

解决方案:

在 HTML 中，在 iframe 元素上添加新指令:

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

在您的 JS 中，定义新指令，以便它等待加载 iframe，然后将 dndDroppable 指令添加到其 body 元素并编译它，所以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);
            });
        }
    };
});