离子输入文本框在模态视图中不起作用

Question

简要解释我打算做什么。我需要做一个模态控制器，当用户点击登录按钮时，它会在背景上显示模态。

在模态视图中，它将有两个输入框和一个按钮，但是当我尝试在输入框中输入值时，我无法这样做。

我尝试在另一个页面上使用两个输入框，它工作正常，这意味着输入框编码没有问题。

    <ion-header>

              <style>
                    @import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

                    h1 {padding: 100px 0; font-weight: 400; text-align: center;}
                    p {margin: 0 0 10px; line-height: 1.5;}

                    .main {margin: 0 auto; width: 100%; border-radius: 20px 20px 0px 0px}
                    .content {background: #fff; color: #373737;}
                    .content > div {display: none; padding: 20px 25px 5px;}
                    .grey { color: grey}
                    input {display: none;}
                    label {display: inline-block; padding: 15px 25px; font-weight: bold; text-align: center; width: 49%; }
                    label:hover {color: #fff; cursor: pointer;}
                    input:checked + label {background: #ed5a6a; color: #fff;}

                    #tab1:checked ~ .content #content1,
                    #tab2:checked ~ .content #content2

                     {
                      display: block;
                    }


                    </style>

            </ion-header>

            <ion-content>

            <ion-list>

                <ion-item>
                  <ion-label fixed>Username</ion-label>
                  <ion-input type="text"></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label fixed>Password</ion-label>
                  <ion-input type="password"></ion-input>
                </ion-item>

              </ion-list>

              <div padding>
                <button ion-button color="primary" block>Sign In</button>
              </div>

             <div class="main">

                      <input id="tab1" type="radio" name="tabs" checked>
                      <label for="tab1">Tab1</label>

                      <input id="tab2" type="radio" name="tabs">
                      <label for="tab2" width="50%">Tab2</label>

                      <div class="content">  
                          <div id="content1">
                            <p class="grey">
                                Account Login</p>
                    <ion-list>

                <ion-item>
                  <ion-label fixed>Username</ion-label>
                  <ion-input type="text"></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label fixed>Password</ion-label>
                  <ion-input type="password"></ion-input>
                </ion-item>

              </ion-list>

              <div padding>
                <button ion-button color="primary" block>Sign In</button>
              </div>

                          </div>

                          <div id="content2">
                            <p>
                             London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
                            </p>
                            <p>
                              London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core.
                            </p>
                          </div>


                      </div>

                    </div>
            </ion-content>