Twitter bootstrap 部分页面上的AngularJs模态对话框

我正在使用AngularJs UI引导中的模式

我希望模态显示在页面的特定部分（例如在特定的DIV中）， 只会使容器变黑，而不是全屏

下面是一个示例，我希望模式仅显示在浅蓝色部分（

id=“chat”

）

---

通常情况下，这是不可能的，因为AngularJs UI引导创建的每个模态都发生在html主体上。话虽如此，总有办法：）

免责声明：以下是一种黑客行为，我强烈建议您创建自己的指令

模态组件公开两个承诺，一个名为结果，另一个名为打开。在我们的例子中，我们将使用第二个来了解模态何时打开和可见。从这里，我们可以将模态附加到另一个div元素，如下所示：

    var modalInstance = $modal.open({
        windowClass : 'uniqueClassName', //use to easily find the dom element
        templateUrl: 'modal.html',
        controller: ChatModalController
    });
    modalInstance.opened.then(function(){
      $timeout(function(){
        var modalDom = document.querySelector('.uniqueClassName'); // The modal
        var modalBackDom = document.querySelector('.modal-backdrop'); //The backdrop
        var chatDom = document.querySelector('#chat');

        chatDom.appendChild(modalDom); //Move modal & backdrop inside chat div
        chatDom.appendChild(modalBackDom);

      });
    })

为了适应新的场景，我们还应该添加/修改一些css类，如下所示：

  #chat {position:relative;}
  #chat .modal,
  #chat .modal-backdrop{
    position : absolute;
  }

---

最后，您可以看到一个正在工作的Plunker。

如果不扩展指令，我看不出该如何操作。