angularjs mobile ui多种模态不起作用

Question

我在同一视图中实现了3种不同的模态， 但只有最后放置的那个才能被激活..我的代码：

    <div ui-content-for="modals"> 
      <div class="modal" ui-if="blockPersonModal" ui-state='blockPersonModal'> 
            <div class="modal-backdrop in"></div> 
            <div class="modal-dialog"> 
              <div class="modal-content"> 
                    <div class="modal-header"> 
                      <button class="close" 
                                      ui-turn-off="blockPersonModal">&times;</button> 
                      <h4 class="modal-title">Block</h4> 
                    </div> 
                    <div class="modal-body"> 
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p> 
                    </div> 
                    <div class="modal-footer"> 
                      <button ui-turn-off="blockPersonModal" class="btn btn-default">Close</button> 
                      <button ui-turn-off="blockPersonModal" class="btn btn-primary">Save changes</button> 
                    </div> 
              </div> 
            </div> 
      </div> 
    </div> 
    <div ui-content-for="modals"> 
      <div class="modal" ui-if="RequestIdentificationModal" ui-state='RequestIdentificationModal'> 
            <div class="modal-backdrop in"></div> 
            <div class="modal-dialog"> 
              <div class="modal-content"> 
                    <div class="modal-header"> 
                      <button class="close" 
                                      ui-turn-off="RequestIdentificationModal">&times;</button> 
                      <h4 class="modal-title">Request Identification</h4> 
                    </div> 
                    <div class="modal-body"> 
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p> 
                    </div> 
                    <div class="modal-footer"> 
                      <button ui-turn-off="RequestIdentificationModal" class="btn btn-default">Close</button> 
                      <button ui-turn-off="RequestIdentificationModal" class="btn btn-primary">Save changes</button> 
                    </div> 
              </div> 
            </div> 
      </div> 
    </div> 
    <div ui-content-for="modals"> 
      <div class="modal" ui-if="ReportModal" ui-state='ReportModal'> 
            <div class="modal-backdrop in"></div> 
            <div class="modal-dialog"> 
              <div class="modal-content"> 
                    <div class="modal-header"> 
                      <button class="close" 
                                      ui-turn-off="ReportModal">&times;</button> 
                      <h4 class="modal-title">Report</h4> 
                    </div> 
                    <div class="modal-body"> 
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p> 
                    </div> 
                    <div class="modal-footer"> 
                      <button ui-turn-off="ReportModal" class="btn btn-default">Close</button> 
                      <button ui-turn-off="ReportModal" class="btn btn-primary">Save changes</button> 
                    </div> 
              </div> 
            </div> 
      </div> 
    </div> 

如果我在代码中更改模态的顺序，仍然只显示最后一个模式。

如何在新的angularjs mobile ui中定义三种不同的模态？ unfourtanatley，文档缺乏关于如何做这样的事情的明确信息。

谢谢，

Yonatan。

Answer 1

发现问题。

编写多个模态的正确方法：

<div ui-content-for="modals">
       <div class="modal">....</div>
       <div class="modal">....</div>
       <div class="modal">....</div>
 </div>

而不是：

<div ui-content-for="modals">
       <div class="modal">....</div>
</div>

<div ui-content-for="modals">
       <div class="modal">....</div>
</div>

<div ui-content-for="modals">
       <div class="modal">....</div>
</div>