如何使用.modal-dialog类将角度指令应用于div?

时间:2018-05-16 11:09:29

标签: angular ngx-bootstrap

通过文档我的模态模板包含.modal-header,.modal-body和.modal-footer元素的问题。我无法定义整个模态模板,因为ngx模态会自动将内容包装到.modal-content> .modal-dialog。

我试图用类选择器应用指令,但这也行不通,因为我认为ngx模块对指令声明和导出的模块一无所知。

我寻找可能是一些选项,可以定义模态的整个模板以及将指令应用到.modal-dialog级别的其他方法。

更具体地说,我有创建指令使模态可拖动,我需要将其完全应用于.modal-dialog级别

谢谢你的帮助

1 个答案:

答案 0 :(得分:0)

你最好的选择应该是使用指令ngx-bootstrap提供。

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
    tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>