Перемещение элемента DOM между вкладками Bootstrap с помощью AngularJS

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 или у него есть пример, вот как я его получил.

Надеюсь, что эта помощь.