在Ionic v1卡中创建可点击按钮

时间:2018-04-20 04:35:01

标签: angularjs ionic-framework

我在Ionic v1中有一个项目,我正在对它进行一些改进。

我有一张卡片列表,卡片本身可以点击,以便用户了解更多细节。我需要在卡上添加几个按钮,但我无法通过按钮捕获点击 - 点击进入卡片href。示例代码如下。

    <div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
        <div class="item" ng-click="clickCard(evtKey)">
          <div class="row">
            <div class="col-20 row-center">
                <div> Some stuff here</div>
            </div>
            <div class="col-80 item-text-wrap">
                <div> More stuff here </div>
                    <div class="row text-center">
                        <div class="col col-33">
                            <div> More stuff </div>
                        </div>
                        <div class="col col-33">
                            <button class="button button-small button-stable" ng-click="alert('Yes')">Yes</button>
                        </div>
                        <div class="col col-33">
                            <button class="button button-small button-stable" ng-click="alert('No')">No</button>
                        </div>
                    </div>
                </div>
            </div>
            <p class="item-icon-right"><i class="icon ion-chevron-right icon-accessory"></i></p>
      </div>
  </div>

寻找有关如何点击按钮的帮助,可以通过按钮捕获,而不是通过卡捕获。到目前为止我发现的例子都是用Ionic v2和更高版本来完成的,而不是用于v1。

谢谢,

-S

1 个答案:

答案 0 :(得分:1)

event.stopPropagation()将停止从父元素调用事件。并且也不要在ng-click

中发出警报
<div class="col col-33">
      <button class="button button-small button-stable" type="button" ng-click="somefunc('Yes');$event.stopPropagation();">Yes</button>
</div>
<div class="col col-33">
       <button class="button button-small button-stable" type="button" ng-click="somefunc('No');$event.stopPropagation();">No</button>
 </div>