要素を選択するには、イオンonHoldとAngularjs ng-clickを組み合わせてください

Question

私の現在のイオンアプリでは、選択したチャットの形で正確に選択したいボックスがあります電文つまり：

1. は、最初に私が正しく 、イオンにOnHoldジェスチャーでこの作品を選択ボックスを起動します。

私はそれらのそれぞれにクリックでボックスを選択または選択解除します。その後

2.、これは

There is JSFiddle

HTML

が動作していません

<ion-content> 
    <div class="box" select-box>box 1</div> 
    <div class="box" select-box>box 2</div> 
    <div class="box" select-box>box 3</div> 
</ion-content> 

JS

var app = angular.module('app', ['ionic']); 
app.directive("selectBox", ["$ionicGesture", "$rootScope", 
    function($ionicGesture, $rootScope) { 
    return { 
     scope: {}, 
     restrict: "A", 
     link: function(scope, elem, attrs) { 

      // onHold => start select box by `onHold` => working good 
      $ionicGesture.on('hold', function() { 
      elem.addClass("selected"); 
      $rootScope.startSelect = true; // to enable select box by click 
      }, elem); 

      // after start select box in `onHold` gesture => 
      // select box by click => not working 
      if ($rootScope.startSelect) { 
      elem.on("click", function() { 
       if (elem.hasClass('selected')) { 
       elem.removeClass("selected"); 
       } else { 
       elem.addClass("selected"); 
       } 
      }); 
      } 

     } // link function 

    } // return 
    } 
]); // directive 

app.controller('MainCtrl', ["$scope", "$rootScope", 
    function($scope, $rootScope) { 
     $rootScope.startSelect = false; 
    } 
]); 

CSS今

.box { 
    padding: 10px; 
    margin: 15px; 
    background: #FFF; 
    width: 200px; 
    margin: 15px auto; 
} 

.selected { 
    background: red; 
    color: #FFF; 
} 

、これをどのように行うには？ AngularJSのドキュメントから、事前に感謝

Answer 1

は：DOMを変更したい

ディレクティブは、通常、DOMリスナーを登録だけでなく、DOMを更新するためのリンクオプションを使用します。これは、テンプレートがクローンされた後に実行され、ディレクティブロジックが配置される場所です。

したがって、linkは最初に1回だけ実行されます。そして、あなたがこれをチェックする部分もあります：if ($rootScope.startSelect) {...}。毎回実行するために、この値が別のリスナー内にtrueであるかどうかをチェックする必要があります。

$ionicGesture.on('tap', function() { 
    if ($rootScope.startSelect) { 
    if (elem.hasClass('selected')) { 
     elem.removeClass('selected'); 
    } else { 
     elem.addClass('selected'); 
    } 
    } 
}, elem); 

お知らせ$rootScope.selectedことが最初のholdイベントの後trueままになりますので、テーピングも選択として機能します：あなたは、たとえば、tapジェスチャーを使用することができます。これがあなたが探している機能であるかどうかはわかりません。

はここにあなたの例で更新フィドルです：http://jsfiddle.net/browomk2/2/