ng-单击 ons-list-item 内的跨度不起作用

Question

我有一个 ons-list，上面有列表项和一个图标，当有人点击列表项时，它应该转到屏幕 A，当我单击图标时，它应该转到屏幕 B，但是问题当我们点击图标时 ng-click 冲突，技术上列表项也被点击。请看下面的代码。

<div ng-controller="getUserContacts">
<ons-list-header>Select Contact</ons-list-header>
<ons-list style="margin: -1px 0">   
    <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div>
    <ons-list-item modifier="" class="list-item" ng-repeat="x in contacts track by $index" style="margin-left: 10px;" ng-click="setcontact(x); page.pushPage('sendmoney2.html', {animation: 'slide'});">                    
        <ons-row>                           
            <ons-col width="52px" style="padding: 10px 0 0 0;">
                <img src="img/red.png" height="42px" width="42px"/>
            </ons-col>
            <ons-col>
                <header>
                    <span class="item-title">{{x.name}}</span>
                    <span class="list-item-note-sendmoney1"  ng-click="page.pushPage('editContact.html', {animation: 'slide'});"><ons-icon icon="ion-ios-information-outline" size="28px"></ons-icon></span>
                </header>
                <p class="swipe-item-desc">{{x.phone}}</p>
            </ons-col>                              
        </ons-row>                      
    </ons-list-item>
</ons-list>
</div>

谢谢。

Answer 1

只要停止事件传播就可以了。将 $event.stopPropagation() 添加到您的第二个 ng-click 中，如下所示：

ng-click="page.pushPage('editContact.html', {animation: 'slide'});$event.stopPropagation()"

Here更深入地解释了事件冒泡和捕获背后的魔法。

ng-单击 ons-list-item 内的跨度不起作用

ng-click on span inside the ons-list-item not working

angularjs

onsen-ui