Question

我有一个表单输入字段和一个模式内的按钮，由于某种原因它们都处于非活动状态。如果我尝试单击它们，我无法在字段中输入任何文本或按钮不执行任何操作。所有字段和按钮在页面和我的所有其他页面上都能正常工作，但在我的模态中无法正常工作。

模态

<ons-modal var="modalSample" ng-controller="SampleController">
  <ons-navigator var="nav3" page="sample">

  </ons-navigator>
</ons-modal>

<ons-template id="sample">
    <ons-page>
        <ons-tabbar position="top">
            <ons-row>
                <ons-col width="15%">
                   <div style="margin-top:15px"><i class="ion ion-arrow-left-c" ng-click="modalSample.hide()"></i></div>
                </ons-col>
                <ons-col width="45%" align="left">
                    <div style="padding-top:18px;color:#fff;">Sample Groups</div>
                </ons-col>
                <ons-col width="20%" align="left">

                </ons-col>            
            </ons-row>
        </ons-tabbar>      
      <ons-row style="padding-top:145px">
        <ons-col>
         <input type="text" id="stufxx" placeholder="test"/>
         <ons-button modifier="large" class="login-button" ng-click="alert('heelo')" style="background:#ccc">Test button</ons-button>
        </ons-col>
      </ons-row>

    </ons-page>
</ons-template>

其余页面

<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="menux.html">
    <ons-page>
        <ons-list class="menu-list">

          <ons-list-item class="menu-item" ng-click="menu.closeMenu()" style="padding-top:2em;padding-bottom:3.5em;">
            <ons-row >
                <ons-col width="20%" align="left">
                    <img src="img/profile.png" width="30" class="profilex"/>
                </ons-col>
                <ons-col width="80%" align="left">
                    Andrew 
                </ons-col>
            </ons-row>            
          </ons-list-item>          
          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('tags.html', {param1: 'bla'});menu.closeMenu()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-barcode-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                    <span style="padding-left:0.3em" align="right" >Tags</span>
                </ons-col>
            </ons-row>            
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="modalSample.show()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-pie-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left"> 
                     <span style="padding-left:0.3em"  align="right">Sample Groups</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('apps.html', {param1: 'bla'});menu.closeMenu()" style="border-bottom:1px solid #ddd">
            <ons-row>
                <ons-col width="20%" align="left">
                     <ons-icon icon="ion-ios-paper-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                     <span style="padding-left:0.3em"  align="right">Apps</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('settings.html', {param1: 'bla'});menu.closeMenu()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-cog-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                     <span style="padding-left:0.3em"  align="right">Settings</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

        </ons-list>

    </ons-page>
</ons-template>


<ons-template id="main.html">
<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">
        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</ons-template>

Answer 1

我有点困惑为什么你会在一个模态中有一个导航器，但我做了一个有输入和按钮的编解码器。请看这个codepen：

http://codepen.io/anon/pen/qbGQrN

模态就是这样：

<ons-modal var="modal">
  <ons-button onclick="alert('It Works! Input - '+document.getElementById('myInput').value);modal.hide();">Button</ons-button>
  <input type="text" id="myInput"/>
</ons-modal>

模态输入表单在Onsenui中处于非活动状态

1 个答案: