0

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

<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

更多上下文

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

堆栈是 angularJS、bootstrap 3、jquery，我无法更改它:(

4

3 回答 3

2

我会在 vanilla javascript 中执行此操作的方式是创建一个函数，该函数创建一个模态元素，然后将其附加到您想要的 DOM 元素，例如主体。

一个例子：

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 个模态元素并将它们附加到任何你想要的地方，例如身体，像这样：

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

document.body.append(modal1)

这样你的 html 会更干净。注意：这fooElement必须是 DOM 元素，否则会抛出错误。希望它有效！

于 2021-06-07T17:40:05.403 回答
1

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

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

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

// back it
$initialFooContentLocation.append( $fooContent.detach() );
于 2021-06-07T17:30:24.683 回答
0

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

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

由于这是一个 angularJS 项目，我遵循了这个简单的指南。

于 2021-06-18T19:31:37.527 回答