携帯端末でNg-Clickが機能していません。 ngTouchに変更するには

Question

私はangular.jsを使用するウェブサイトを持っています。 ng-clickは、ラップトップ/デスクトップでうまくいきますが、モバイルデバイスではうまくいきません。私の研究から、私はngTouchを使用する必要があることを知り、それを否定しました。私の問題は、私はプログラマではなく、どうやってそれを行うのか分からないということです。

私に助けを与えたり、適切なステップやコードを私に提供したいと思っている人がいることを願っています。

<script src="../templates/js/jquery.js"></script> 
<script src="../templates/js/angular.js"></script> 
<script src="../templates/js/angular-ui.js"></script> 
<script src="../templates/js/angular-touch.js"></script> 
<script src="../templates/js/angular-touch.min.js"></script> 
<script> 
    function MessageBoardCtrl($scope, $http, $timeout) { 
     $scope.items = []; 
     $scope.message = ''; 
     $scope.email = ''; 
     $scope.lastTime = 0; 

     $scope.refreshMessages = function() { 
      $http.get('../templates/faucet.php/messages?time=' + $scope.lastTime).success(function(data) { 
       for(id in data) { 
        item = data[id]; 
        $scope.items.unshift(item); 
        if($scope.lastTime<item.time) 
         $scope.lastTime = item.time; 
       } 
      }); 
     } 

     $scope.sendMessage = function() { 
      if(!$scope.message) 
       return; 
      $http.post('../templates/faucet.php/add_message', {message: $scope.message, email: $scope.email}).success(function() { 
       $scope.message = ''; 
      }); 
     } 

     $scope.periodicRefresh = function() { 
      $scope.refreshMessages(); 
      $timeout($scope.periodicRefresh, 5000, true); 
     } 

     $scope.refreshMessages(); 
    } 
    </script> 

誰かがそれ以上にもngtouchと命令のために働くだろうに基づいて私にクリーンなコードを与えることができます：ここで

<div class="container" ng-controller="MessageBoardCtrl"> 
    <div class="span6">  
    <div class="row-fluid item" ng-repeat="item in items" ui-animate> 
     <div class="span2"><img src="../images/post.png" width="48px" height="48px"/></div> 
      <div class=" well well-small">           
       <p>{{item.message}}</p> 
      </div> 
     </div> 
    </div> 

    <div class="span6"> 
     <div class='well'>     
      <button class="btn btn-primary" ng-click="sendMessage()">Share</button> 

ではJavaScriptです：これは私のコードです。前もって感謝します。

Answer 1

タッチイベントの独自の指示を書くことができます。以下は、タッチイベントを処理するための指示の例です。以下の指令は、タッチ/ロングタッチの場合のみイベントを発生させます。 scope.isMovedは、ユーザーが画面をタップして指を動かしたときに発生するイベントを防ぎます。 HTMLで

function directive($timeout) { 

    var dir = { 
     link: link, 
     restrict: 'A', 
     scope: { 
      onTouch: '&' 
     } 
    }; 
    return dir; 

    function link(scope, element) { 
     scope.isMoved = false; 
     $timeout(function() { 
      // user start tap on screen 
      element.bind('touchstart', function() { 
       scope.isMoved = false; 
      }); 

      element.bind('touchend click', function (evt) { 

       if (!scope.isMoved) { 
        scope.onTouch(evt); 
       } 
      }); 
      // 
      element.bind('touchmove', function() { 
       scope.isMoved = true; 
      }); 
     }); 
    } 
} 

：

<a on-touch="someFunction()"> Touch</a>