2014-12-20 183 views
0

我實現在同一視圖3個不同的情態動詞, 但只有一個,將其放置最後的移動用戶界面多模態可以激活..我的代碼:angularjs不工作

<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中定義三種不同的模式?文檔缺乏關於如何做這種事情的明確信息。

謝謝,

Yonatan。

回答

0

發現問題。

寫多模態的正確方法:

<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>