在ui路由器中使用自定义模式

Question

我想在根HTML中拥有自己的模态，可以在子状态下随时调用。

例如，index.html是

<div ui-view="contacts"></div>  <--! load contact.html -->
<div ui-view="modal"></div>

然后，contacts.html

<div> contact detail </div>
<button ng-click="openModal('confirmModal')"> delete it ? </button>

单击按钮时，我想提示一个模态并确认操作。我想使用ui-router提供的模板系统，因此我可以为不同的模态分离不同的视图（可能每个视图都有不同的状态）。

我设计的路由表如下，

app.config(['$stateProvider',function(s) {
  s.state('index',{
     views : {
       contacts : {
          templateUrl : "views/contacts.html"
       }
     }
  ).state('openConfirmModal',{
     views : {
       modal : {
          templateUrl : "views/modal.confirm.html"
       }
     }
  }).state('openOtherModal',{
     //... loading other modal
  })
}

从州index转到openConfirmModal时，modal.confirm.html应加载到modal视图中，而不会破坏并刷新显示index视图，以便它的行为就像一个＆＃34;模态＆＃34;。

但ui-router实际上做的是在状态发生变化时关闭或刷新index视图。

我知道有关为$stateChangeStart添加事件侦听器的一些想法，以便在事件发生时不会刷新index视图。但我不知道如何将模态加载到事件处理程序中的视图中。