Question

我创建了一个列表，其中的每个项目都包含一个右侧的按钮。我写了两个不同的功能，一个用于直接处理项目，另一个用于右边的按钮。

问题是点击按钮导致调用这两个函数。

如何编辑.html（如果不可能，则为.js），以便点击项目（不包括按钮区域）将调用一个函数，单击右键将调用另一个函数。

HTML：

    <ion-list>
        <ion-item ng-repeat='item in list' class='list-group-item' 
            item="item"
            ng-click="clicker(item)" >
            <a class="item item-button-right">
                <h2>Item {{item.id}}</h2>
                <div class="buttons">
                    <button class="button button-assertive" ng-click="onRemoveClick(item)">
                    <i class="icon icon ion-close"></i>
                    </button>
                </div>
            </a>
        </ion-item>
    </ion-list>

AngularJS：

angular.module('ionicApp', ['ionic'])

.controller('list_controller', function($scope) {

    $scope.clicker = function(item){
    alert('Item Clicked: '+item.id)
};

    $scope.onRemoveClick = function(item){
    alert('Remove Clicked: '+item.id)
};

$scope.list = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 }
];

});

Answer 1

您可以使用stopPropagation。以下示例

查看

ng-click="onRemoveClick(item, $event);"

<强>的js

$scope.onRemoveClick = function (item, $event) { $event.stopPropagation(); }

离子：区分列表项和列表项

1 个答案: