ng-click 内部标签不起作用

Question

<ion-view>
 <div class="bar bar-header bar-dark">
  <h1 class="title">Welcome</h1>
 </div>
 <ion-content class="has-header">
  <form ng-submit="doLogin()">
   <div class="list">
    <label class="item item-input">
     <span class="input-label">手机号</span>
     <input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
     <button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
    </label>
    <label class="item item-input">
     <span class="input-label">验证码</span>
     <input type="password" ng-model="verifycode">
    </label>
    <label class="item">
     <button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
    </label>
   </div>
  </form>
 </ion-content>
</ion-view>

why the button(获取验证码) inside label tag doesnt work?
but the button(登陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click the button(获取验证码)

Answer 1

working demo

解决方案就是不对项目使用 label。而只是使用 div

html

<form ng-submit="doLogin()">
        <div class="list">
            <div class="item item-input">
                <span class="input-label">手机号</span>
                <input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
                <!-- <input ></input> -->
                <button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
            </div>
            <label class="item item-input">
                <span class="input-label">验证码</span>
                <input type="password" ng-model="verifycode">
            </label>
            <label class="item">
                <button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
            </label>
        </div>
</form>

ng-click 内部标签不起作用

ng-click inside label does not work

ionic-framework

ionic

angularjs-ng-click