使用Angular Directive在iFrame上拖放

Question

我需要一些控件才能在iFrame中使用Drag&Drop.我需要iframe中的功能的原因是因为我们正在构建的CMS以及"编辑页面"中的任何"绝对"css更改也将影响主站点.

我已经写了一个角度指令,并为此构建了一个小型原型,只要它在同一页面上它就完美无缺,但是当我试图在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. 即使有一个这样的元素,在 angular解析了DOM 之后,该dnd-droppable属性也被添加到了iframebody中,因此根本不考虑它.

解:

在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);
            });
        }
    };
});