Question

我正在开发一个管理不同媒体时间的项目。主页面分为3个选项卡，图像，视频和幻灯片。 “图像”和“视频”选项卡各有一个表，该表使用ng-repeat基于数据库信息创建行。幻灯片选项卡可以选择通过选择图像或视频来创建幻灯片。

由于多次构建同一个大表是很昂贵的，所以我想将图像和视频标签的内容移动到幻灯片选项卡中。我还认为如果用户可以从他们离开的地方继续接听会很好，所以这也是为什么移动它很有吸引力的另一个原因。我对Angular很新，我似乎无法弄清楚如何以Angular的方式做到这一点。如果我只是使用jQuery，我可以选择内容包装器，将其分离，并将其附加到幻灯片选项卡，但在这种情况下，这不是一个选项。

现在，我将所有内容存储在一个大型HTML文件中。我的第一个想法是将标签内容分解为部分并在多个地方使用ng-include，但我认为这不会允许我使用相同的元素。我也尝试使用jqLite来附加元素，但我不确定如何选择所选对象的html，而不是角度对象本身。

重用这些现有DOM元素的最佳方法是什么？

编辑：这是一个内部项目，因此我无法立即链接到某个页面或包含所有代码，但我可以写出一般结构。

<tabset>
    <tab heading="Images" id="image-tab">
        <div id="image-tab-content">
            <table>
               <thead> [HEADERS ARE HERE] </thead>
               <tbody>
                   <tr ng-repeat="item in itemList"> [ROW INFO] </tr> 
               </tbody>
            </table>
        </div>
    </tab>
    <tab heading="Slideshows">
         <div id="slideshow-content-wrapper">
            <p>Add pictures using tables below</p>
            <tabset>
                <tab heading="Second Image Tab">
                    [MOVE image-tab-content HERE]
                </tab>
            </tabset>
         </div>
    </tab>
</tabset>

希望能澄清一点。当您单击幻灯片选项卡时，我只是想将图像选项卡的内容移动到第二个图像选项卡。

Answer 1

不确定这是否已经解决，但我也面临着类似的情况。我需要将角度选项卡之外的DOM元素移动到内容中。

我不想手动修改DOM，但是我无法找到其他方法，所以这就是我所做的（这也适用于你。

$scope.tabs = [];
$scope.addTab = function(el) {
    var tab = { title: el.data("title")};
    $scope.tabs.push(tab);
    $scope.$apply();

    var index = $scope.tabs.length - 1;
    angular.element($element.find(".tab-pane").get(index)).find("span").append(el);
};

正如您所看到的，在添加选项卡后，我手动检索新选项卡，然后将元素移到内部。在你的情况下，你只需要做类似的事情。

我知道这是针对AngularJS操纵DOM的，但是直到他们有办法接受content元素或者有一个例子，这就是我的工作原理。

希望得到这个帮助。

使用AngularJS在Bootstrap选项卡之间移动DOM元素

1 个答案: