Question

美好的下午:)

TL; DR - 如何在<div>内使用$scoped从ng-bind-html JSON blob渲染多个ng-repeat生成的div可以使用JQuery UI的拖动逻辑拖动吗？

背景

我正在尝试构建一个具有JSON blob（代表页面当前状态）的网站。其中页面包含＆＃34;卡＆＃34;在更大的笔记本电脑里面＃34;沿着这条线：

JSON

{
"page": {
    "notebookA": [{
        "name": "card1",
        "cardType": "operation",
        "html": "<div draggable>I can be dragged - card1</div>"
    }, {
        "name": "card2",
        "cardType": "selection",
        "html": "<div draggable>I can be dragged - card2</div>"
    }],
    "notebookB": [{
        "name": "card3",
        "cardType": "operation",
        "html": "<div draggable>I can be dragged - card3</div>"
    }, {
        "name": "card4",
        "cardType": "selection",
        "html": "<div draggable>I can be dragged - card4</div>"
    }]
}

}

我想使用这样的系统的原因是因为我希望能够将页面JSON保存到数据库，并允许用户拥有可以配置的多个页面，然后快速访问/使用。基于$ scope.page变量的渲染将使生活变得轻松。

我正在考虑使用Angular来显示页面json的实时表示，其中通过使用$ scope.page变量来显示卡片。这意味着在笔记本div中使用ng-repeat：

HTML

<div ng-repeat="card in page['notebookA']"> <div ng-bind-html="card['html']"></div> </div>

我可以通过使用html = $sce.trustAsHtml(...)来正确渲染html但是我无法拖动渲染的div。

JQuery的

$(function(){
    $("[draggable]").draggable();
    $('[droppable]').droppable({ drop: Drop });

    function Drop(event, ui) {
        ...
    });
})

所以我考虑使用directive，但不确定如何处理这类问题，因为我认为我需要做的就是在渲染新的{{1}后运行$("[draggable]").draggable(); }。

问题

我已经查看了其他Stack Overflow问题，并且在指令/方向指导方面处于领先地位，但我无法找到一个结合我尝试做的所有事情的答案。任何帮助是极大的赞赏！

这是解决此问题的最有效方法，还是使用innerHTML注入和＆＃34; card-render＆＃34;功能更好的解决方案？
我将从以下几点开始解决此问题（使用<div>创建div的拖动工作。）

Jquery UI使用ng-repeat，ng-bind-html和范围变量进行拖放操作

0 个答案: