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

Question

我正在尝试编写一个指令，打开与（动态）列表中的元素一样多的对话框。

如果我在“link”中应用对话框（），jquery-ui会将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);
        },
    };
});

（jsfiddle：点击添加两次：两个对话框中的一个为空，并且显示的内容不应该显示在其中

我该如何做到这一点？

编辑：我开始意识到指令和jquery-ui的对话框之间存在冲突，因为两者都想控制/拥有dom元素（一个是本地的，而另一个是全局的）。在这一点上，我试图使用角度服务，但我仍然有兴趣了解事情是如何工作的（或者不是），即这里：为什么对话框和ng-repeat都在移动节点。