イオンイオンリストスワイプの問題を無効にする

Question

イオンリストのスワイプをイオンで無効にし、リストの保持を使用したいと思います。

すでにcan-swipe = "false"を使用して無効にしていますが、showDeleteまたはshowReorderアクションをトリガーすると、スワイプによって自動的に再び有効になります。スワイプが再度有効にならないようにするにはどうしてですか？ここで

は
HTML @Ansonによって提案されたとして、あなたは目を扱うことができる

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

.directive('holdList', ['$ionicGesture', function($ionicGesture) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $ionicGesture.on('hold', function(e) { 

     var content = element[0].querySelector('.item-content'); 

     var buttons = element[0].querySelector('.item-options'); 
     var buttonsWidth = buttons.offsetWidth; 

     ionic.requestAnimationFrame(function() { 
      content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; 

      if (!buttons.classList.contains('invisible')) { 
      content.style[ionic.CSS.TRANSFORM] = ''; 
      setTimeout(function() { 
       buttons.classList.add('invisible'); 
      }, 250); 
      } else { 
      buttons.classList.remove('invisible'); 
      content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; 
      } 
     }); 

     }, element); 
    } 
    }; 
}]) 
.controller('MyCtrl', function($scope) { 

    $scope.data = { 
    showDelete: false 
    }; 

    $scope.edit = function(item) { 
    alert('Edit Item: ' + item.id); 
    }; 
    $scope.share = function(item) { 
    alert('Share Item: ' + item.id); 
    }; 

    $scope.moveItem = function(item, fromIndex, toIndex) { 
    $scope.items.splice(fromIndex, 1); 
    $scope.items.splice(toIndex, 0, item); 
    }; 

    $scope.onItemDelete = function(item) { 
    $scope.items.splice($scope.items.indexOf(item), 1); 
    }; 

    $scope.items = [ 
    { id: 0 }, 
    { id: 1 }, 
    { id: 2 }, 
    { id: 3 }, 
    { id: 4 }, 
    { id: 5 }, 
    { id: 6 }, 
    { id: 7 }, 
    { id: 8 }, 
    { id: 9 }, 
    { id: 10 }, 
    { id: 11 }, 
    { id: 12 }, 
    { id: 13 }, 
    { id: 14 }, 
    { id: 15 }, 
    { id: 16 }, 
    { id: 17 }, 
    { id: 18 }, 
    { id: 19 }, 
    { id: 20 }, 
    { id: 21 }, 
    { id: 22 }, 
    { id: 23 }, 
    { id: 24 }, 
    { id: 25 }, 
    { id: 26 }, 
    { id: 27 }, 
    { id: 28 }, 
    { id: 29 }, 
    { id: 30 }, 
    { id: 31 }, 
    { id: 32 }, 
    { id: 33 }, 
    { id: 34 }, 
    { id: 35 }, 
    { id: 36 }, 
    { id: 37 }, 
    { id: 38 }, 
    { id: 39 }, 
    { id: 40 }, 
    { id: 41 }, 
    { id: 42 }, 
    { id: 43 }, 
    { id: 44 }, 
    { id: 45 }, 
    { id: 46 }, 
    { id: 47 }, 
    { id: 48 }, 
    { id: 49 }, 
    { id: 50 } 
    ]; 

}); 

CodePen

Answer 1

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> 

    <ion-item ng-repeat="item in items" 
       item="item" 
       href="#/item/{{item.id}}" class="item-remove-animate" hold-list> 
     Item {{ item.id }} 
     <ion-delete-button class="ion-minus-circled" 
         ng-click="onItemDelete(item)"> 
     </ion-delete-button> 
     <ion-option-button class="button-assertive" 
         ng-click="edit(item)"> 
     Edit 
     </ion-option-button> 
     <ion-option-button class="button-calm" 
         ng-click="share(item)"> 
     Share 
     </ion-option-button> 
     <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
    </ion-item> 

    </ion-list> 

コントローラと指令私のコードですe「showDelete」と「showReorder」ボタンのイベントをクリックし、can-swipe = falseを再適用します。

これは、$ timeout（）内で$ionicListDelegate.canSwipeItems(false);を実行する関数（$scope.noSwipe以下のスニペットを参照）で取得できます。これは、現在のバージョンのIonic（コードhttps://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L158参照）の問題を回避するために、操作を適切に遅延させるために必要です。

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

 
.directive('holdList', ['$ionicGesture', function($ionicGesture) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope, element, attrs) { 
 
     $ionicGesture.on('hold', function(e) { 
 

 
     var content = element[0].querySelector('.item-content'); 
 

 
     var buttons = element[0].querySelector('.item-options'); 
 
     var buttonsWidth = buttons.offsetWidth; 
 

 
     ionic.requestAnimationFrame(function() { 
 
      content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; 
 

 
      if (!buttons.classList.contains('invisible')) { 
 
      content.style[ionic.CSS.TRANSFORM] = ''; 
 
      setTimeout(function() { 
 
       buttons.classList.add('invisible'); 
 
      }, 250); 
 
      } else { 
 
      buttons.classList.remove('invisible'); 
 
      content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; 
 
      } 
 
     }); 
 

 
     }, element); 
 
    } 
 
    }; 
 
}]) 
 

 
.controller('MyCtrl', function($scope, $ionicListDelegate, $timeout) { 
 

 
    $scope.data = { 
 
    showDelete: false 
 
    }; 
 

 
    $scope.edit = function(item) { 
 
    alert('Edit Item: ' + item.id); 
 
    }; 
 
    $scope.share = function(item) { 
 
    alert('Share Item: ' + item.id); 
 
    }; 
 

 
    $scope.moveItem = function(item, fromIndex, toIndex) { 
 
    $scope.items.splice(fromIndex, 1); 
 
    $scope.items.splice(toIndex, 0, item); 
 
    }; 
 

 
    $scope.onItemDelete = function(item) { 
 
    $scope.items.splice($scope.items.indexOf(item), 1); 
 
    }; 
 
    
 
    $scope.noSwipe = function() { 
 
    console.log("noSwipe"); 
 
    $timeout(function() { 
 
     $ionicListDelegate.canSwipeItems(false); 
 
    }) 
 
    }; 
 

 
    $scope.items = [ 
 
    { id: 0 }, 
 
    { id: 1 }, 
 
    { id: 2 }, 
 
    { id: 3 }, 
 
    { id: 4 }, 
 
    { id: 5 }, 
 
    { id: 6 }, 
 
    { id: 7 }, 
 
    { id: 8 }, 
 
    { id: 9 }, 
 
    { id: 10 }, 
 
    { id: 11 }, 
 
    { id: 12 }, 
 
    { id: 13 }, 
 
    { id: 14 }, 
 
    { id: 15 }, 
 
    { id: 16 }, 
 
    { id: 17 }, 
 
    { id: 18 }, 
 
    { id: 19 }, 
 
    { id: 20 }, 
 
    { id: 21 }, 
 
    { id: 22 }, 
 
    { id: 23 }, 
 
    { id: 24 }, 
 
    { id: 25 }, 
 
    { id: 26 }, 
 
    { id: 27 }, 
 
    { id: 28 }, 
 
    { id: 29 }, 
 
    { id: 30 }, 
 
    { id: 31 }, 
 
    { id: 32 }, 
 
    { id: 33 }, 
 
    { id: 34 }, 
 
    { id: 35 }, 
 
    { id: 36 }, 
 
    { id: 37 }, 
 
    { id: 38 }, 
 
    { id: 39 }, 
 
    { id: 40 }, 
 
    { id: 41 }, 
 
    { id: 42 }, 
 
    { id: 43 }, 
 
    { id: 44 }, 
 
    { id: 45 }, 
 
    { id: 46 }, 
 
    { id: 47 }, 
 
    { id: 48 }, 
 
    { id: 49 }, 
 
    { id: 50 } 
 
    ]; 
 

 
});

<html ng-app="ionicApp"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <title>Ionic List can swipe</title> 
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 
    <ion-header-bar class="bar-positive"> 
 
    <div class="buttons"> 
 
     <button class="button button-icon icon ion-ios-minus-outline" ng-click="data.showDelete = !data.showDelete; data.showReorder = false; noSwipe();"></button> 
 
    </div> 
 
    <h1 class="title">Ionic Delete/Option Buttons</h1> 
 
    <div class="buttons"> 
 
     <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder; noSwipe();"> 
 
     Reorder 
 
     </button> 
 
    </div> 
 
    </ion-header-bar> 
 

 
    <ion-content> 
 
    <ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> 
 
     <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate" hold-list on-swipe="swipeLeft(item.id)"> 
 
     Item {{ item.id }} 
 
     <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> 
 
     </ion-delete-button> 
 
     <ion-option-button class="button-assertive" ng-click="edit(item)"> 
 
      Edit 
 
     </ion-option-button> 
 
     <ion-option-button class="button-calm" ng-click="share(item)"> 
 
      Share 
 
     </ion-option-button> 
 
     <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
 
     </ion-item> 
 
    </ion-list> 
 
    </ion-content> 
 
</body> 
 
</html>