Question

我正在尝试使用Mobile Angular UI来创建一个模态，每当我尝试实现它时，就像文档中显示的一样，它只是在所有内容上显示叠加（模态），并且关闭按钮不会功能。如果有人能指出我正确的方向，我会很感激，我很有棱角。

    <body ng-app="myApp">
    <!-- Application body -->
    <div class="app">
        <div class="navbar-absolute-top"></div>
        <div class="navbar-absolute-bottom"></div>
        <div class="app-body" style="padding-top:10vh; padding-bottom:10vh">
            <ng-view>
                <div id="geolocation" style="height:80vh; width:100%"></div>
            </ng-view>
        </div>
        <!-- Overlays -->
        <div ui-yield-to="modals"></div>
    </div>

    <!-- Overlay content -->
    <div ui-content-for="modals">
      <div class="modal modal-overlay" ui-if='modal2' ui-state='modal2'>
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button class="close"
                      ui-turn-off="modal2">&times;</button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>Lorem ipsum ...</p>
            </div>
            <div class="modal-footer">
              <button ui-turn-off="modal2" class="btn btn-default">Close</button>
              <button ui-turn-off="modal2" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Initialize App -->
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

Answer 1

我在rails中遇到了同样的问题，对我来说问题是在app-body <div class='app-body'></div>而不是<div ui-yield-to="modals"></div>内部显示模态。因此，如果您使用的是轨道，则只需在模态之间进行屈服。

<div ui-yield-to="modals"><%= yield :modals %></div>

你的模态需要包含在：

<% content_for :modals do %>
<div ui-content-for="modals"> 
...
</div>
<% end %>

移动角度UI模式

1 个答案: