Question

我遇到了具有ng-click和on-hold属性的元素的问题。问题是在保持事件之后将执行ng-click事件。

我认为这是一个常见问题，我希望有一个解决方案。

示例：

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title></title>

    <link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.min.js"></script>

    <script src="js/ListCtrl.js"></script>
    <script src="js/app.js"></script>
</head>

<body ng-app="starter">

    <ion-nav-bar class="bar-positive">
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

</body>
</html>

list.html

<ion-view view-title="Test">

    <ion-content>

        <ion-list show-delete="data.deleteMode">

            <ion-item class="item-icon-right"
                      ng-repeat="item in items track by $index"
                      on-hold="data.deleteMode = ! data.deleteMode;"
                      ng-click="onClick(item)">

                <ion-delete-button class="ion-trash-a" ng-click="onRemoveTaskBtn(task)"></ion-delete-button>

                <p>{{item.text}}</p>
            </ion-item>
        </ion-list>

    </ion-content>
</ion-view>

app.js

angular.module('starter', [
    'ionic',
    'starter.list'
]).run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
    });
}).config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/list');
});

ListCtrl.js

angular.module('starter.list', [])
    .config(function ($stateProvider) {
        $stateProvider.state('list', {
            url: '/list',
            templateUrl: 'js/list.html',
            controller: 'ListCtrl'
        });
    }).controller('ListCtrl', [
        '$scope',
        function ($scope) {
            $scope.data = {
                deleteMode : false
            };

            $scope.items = [
                { text : 'Text 1' },
                { text : 'Text 2' },
                { text : 'Text 3' },
                { text : 'Text 4' },
                { text : 'Text 5' }
            ];

            $scope.onClick = function(item) {
                console.log('Clicked on item with text: ' + item.text);
            }
        }
    ]);

Answer 1

刚刚发现完全相同的问题。解决方案是使用on-tap而不是ng-click。对于我所见过的，Ionic将其事件分类为tap持续时间并停止将事件传播给其自己的侦听器。由于ng-click不是Ionic事件，因此将传播该事件。

离线ng-click将在暂停后执行

1 个答案: