Angularjs 角度和重复的jquery ui对话框

我正试图写一个指令，让打开的对话框和（动态）列表中的元素一样多

如果我在“link”中应用dialog（），jqueryui会将div移动到文档正文的末尾，并将其他元素环绕在其周围。这适用于列表中的第一个实例。但是，当添加第二个实例时，第一个实例的div将被拉回（不带包装器）最初定位的位置

myMod.directive('instanceDialog', function($timeout) {
    return {
        restrict: 'A',
        template: '<div>Directived instance of {{instance}}</div>',

        link: function(scope, element, attrs) {
            $timeout(function() {
                $(element).dialog().dialog('open');
            },0);
        },
    };
});

myMod.directive（'instanceDialog'，函数（$timeout）{
返回{
限制：“A”，
模板：{{instance}}的定向实例，
链接：函数（范围、元素、属性）{
$timeout（函数（）{
$（元素）.dialog（）.dialog（'open'）；
},0);
},
};
});

（：单击添加两次：两个对话框中的一个为空，并且在不应该显示的地方显示了内容）

我怎样才能做到这一点

---

编辑：我开始意识到指令和jQueryUI对话框之间存在冲突，因为两者都希望控制/拥有dom元素（一个是本地的，另一个是全局的）。此时，我正尝试使用angular服务，但我仍有兴趣了解事物的工作原理（或不工作原理），即：为什么dialog和ng repeat都在移动节点。

那么，您是否打算为指令提供一个配置对象列表，指定如何显示每个对话框？此列表是否被外部代码修改？如果是，是否需要修改显示的对话框列表？其目的更多的是具有不同的内容，而不是不同的配置。列表由“外部”代码填充，如示例中的“添加”按钮。我不确定是否理解“是否需要修改显示的对话框列表？”。我只想拥有双向绑定，以便javascript列表（实例）与打开的小部件列表同步（我当然需要添加一个关闭处理程序，但这是另一个问题）。那么列表中的每个项目代表什么？我真的不明白你想在这里完成什么。列表中的每一项都代表一个打开的对话框。我希望在将项目推入列表时打开一个新对话框（以前打开的对话框保持打开状态）。