Модальная форма ввода неактивна в 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>