Question

我有一个使用angular.js的网站。 ng-click在笔记本电脑/台式机上工作正常，但在移动设备上却没有。根据我的研究，我了解到我需要使用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：

<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和指令。提前致谢。

Answer 1

您可以为触摸事件编写自己的指令。以下是处理触摸事件的示例指令。以下指令仅在触摸/长触摸时触发事件。当用户点击屏幕并移动他们的手指时，scope.isMoved将阻止触发事件。

    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;
            });
        });
    }
}

在HTML中：

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

Ng-Click无法在移动设备上运行。如何更改为ngTouch

1 个答案: