在Onsenui处于非活动状态的模态输入表格

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输入和按钮在它的工作。请参阅本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>