javascript - 使用 Jquery 克隆 HTML 元素并将单个按钮附加到每个元素

Question

我正在使用 AngularJS 和 Jquery 制作表单构建器。我可以将表单元素从侧边栏拖放到主放置屏幕（表单编辑屏幕）上。我还能够使用一个简单的 AngularJS 函数为每个克隆添加重复的 ID，该函数不断增加 id 值并将其附加到克隆的元素。

这是我的克隆过程代码：

$( "#dropzone" ).droppable(
{
    accept: ".divinner",
    drop: function( event, ui ) {
    $scope.incid();
    var cloned = $(ui.draggable).clone(true).attr('id',$scope.setid());
    var clonedfinal = $compile(cloned)($scope);
    $(this).append(clonedfinal);
    $("#dropzone .divinner").addClass("item");
    $(".item").removeClass("ui-draggable divinner");
    $(".item .hidden").removeClass("hidden");
    }
})

以下是我用于表单元素的 html 代码的一部分（正在克隆到下拉屏幕上）：

<div class = "ui-widget-content divinner" style="width: 100%; height: 50px; padding: 0.5em; background:#bfbfbf;">
    <input type="button" value="Button" style="height: 2.5em;">
    <div class="hidden">
        <input type="button" value="Settings" style="position:absolute; right: 5%">
        <div class="settingsmenu" style="display: none; z-index: 1; border: 1px solid black; position:absolute;">
            Button Name: <input type="text"><br>
            Button ID: <input type="text"><br>
            <input type="button" value="Update">
        </div>
    </div>
</div>

现在我面临的问题是仅为正在单击的元素克隆（设置按钮）打开特定的设置菜单。我尝试使用 Angular Scope 变量，但正如预期的那样，一次打开了所有克隆的所有设置菜单。我尝试使用 getElementById 获取 Document 元素，但这给了我一个“null”。

我是 JQuery 和 Angular 的新手。任何有关此问题的指导的帮助将不胜感激。

谢谢

标签： javascriptangularjquery-ui-draggablejquery-ui-droppable