如何在模式中重用现有的 HTML 元素？

Question

考虑具有自定义组件 <foo> 的 UI- 现在假设它只是文本。

<foo id="foo-id">SOMETEXT</foo>

我想在 UI 上的两个位置显示此内容 - 其中一个在模式中。我怎样才能将模态内容委托给这个现有元素？我正在使用开放 Jquery/angularjs 或本机 HTML 解决方案。

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
        ### REFERENCE TO ID #foo-id here ###
      </div>
  </div

我试图避免使用该元素的第二个实例，例如：

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
            <foo id="foo-id-2">SOMETEXT</foo>
      </div>
  </div

更多上下文

我真正想要这样做的原因是因为我们有一个带有下拉扩展器的网页，它已经呈现了丰富的组件。我们正在尝试添加一个“弹出”按钮，该按钮将以模式 window 显示呈现的元素。因为在按下弹出窗口时元素已经处于正确的加载状态，所以将组件委托给预定义组件而不是重新创建是有意义的。

Stack 是 angularJS, bootstrap 3, jquery 我不能改变这个:(

Answer 1

如果您不需要两个副本，您可以尝试分离该元素并将其插入到他的新位置

let $fooContent = $("#foo-id");
let $myModal = $("#exampleModal > .modal-body");
...

// set it
$myModal.html( $fooContent.detach() );

// back it
$initialFooContentLocation.append( $fooContent.detach() );

Answer 2

我在 vanilla javascript 中的做法是创建一个函数来创建模态元素，然后将其附加到您想要的 DOM 元素，例如body.

一个例子：

function createModal(modalId, fooElement){
  const modalDiv = document.createElement('div');
  modalDiv.classList.add('modal');
  modalDiv.classList.add('fade');
  modalDiv.id = modalId;

  const modalBodyDiv = document.createElement('div');
  modalBodyDiv.classList.add('modal-body');

  modalBodyDiv.append(fooElement);

  return modalDiv;
}

然后用它来创建 N 个模式元素并将它们附加到任何你想要的地方，例如body，像这样：

const modal1 = createModal('myModal1', fooElement);

document.body.append(modal1)

这样您的 html 会更干净。注意：这个fooElement必须是DOM元素，否则会报错。希望有用！

Answer 3

接受的答案对我有用；但是，为了完整起见，这里还有另一种方法。

使用 $scope/$rootScope 事件发射器在组件之间广播事件。如果组件有明确的 parent/child 关系，通常 $scope 就足够了，如果它们是兄弟姐妹，则它们可以通过 $rootScope.

共享事件

由于这是一个 angularJS 项目，我关注了 this simple guide.

如何在模式中重用现有的 HTML 元素？

How to reuse existing HTML element in a modal?

html

javascript

jquery

angularjs

bootstrap-4

更多上下文