2014-10-02 34 views

Odpowiedz

13

Jest to moduł do tego: https://docs.angularjs.org/api/ngTouch

Ale można napisać swoje własne wytyczne dla zdarzeń zbyt:

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
 
    </head> 
 
    <body ng-app="plunker"> 
 
     <div ng-controller="MainCtrl"> 
 
      <div my-touchstart="touchStart()" my-touchend="touchEnd()"> 
 
       <span data-ng-hide="touched">Touch Me ;)</span> 
 
       <span data-ng-show="touched">M-m-m</span> 
 
      </div> 
 
     </div> 
 
     <script> 
 
      var app = angular.module('plunker', []); 
 
      app.controller('MainCtrl', ['$scope', function($scope) { 
 
       $scope.touched = false; 
 

 
       $scope.touchStart = function() { 
 
        $scope.touched = true; 
 
       } 
 

 
       $scope.touchEnd = function() { 
 
        $scope.touched = false; 
 
       } 
 
      }]).directive('myTouchstart', [function() { 
 
       return function(scope, element, attr) { 
 

 
        element.on('touchstart', function(event) { 
 
         scope.$apply(function() { 
 
          scope.$eval(attr.myTouchstart); 
 
         }); 
 
        }); 
 
       }; 
 
      }]).directive('myTouchend', [function() { 
 
       return function(scope, element, attr) { 
 

 
        element.on('touchend', function(event) { 
 
         scope.$apply(function() { 
 
          scope.$eval(attr.myTouchend); 
 
         }); 
 
        }); 
 
       }; 
 
      }]); 
 
     </script> 
 
    </body> 
 
</html>

+0

Zainstalowałem ten moduł wczoraj i napisałem ten post po. Spróbuję z tymi dyrektywami. – ciembor

+2

Biblioteka programu ngTouch Angulara nie obsługuje powiązania z indywidualnymi wydarzeniami dotykowymi i wydaniami: http://stackoverflow.com/questions/19985097/can-angulars-ngtouch-library-be-used-to-detect-a-long-click-touch -hold-release – Egg

7

Zrobiłem te ealier dzisiaj ponieważ ja potrzebowałem ja:

Nadzieję, że to pomaga.

+0

Chciałbym użyć ngTouchstart, ale niestety używa on eval(), która pęknie w aplikacji Chrome. –

+0

Po prostu zaktualizowano go, aby zamiast niego używać '$ scope. $ Apply'. –

+1

dzięki! czy może zdecydować się na przejście w lewo lub w prawo od dyrektywy? – Martian2049

1

Wersja, którą wymyśliliśmy, wykorzystuje funkcję $ parse(), która jest używana przez funkcję $ eval() wewnętrznie. Chcieliśmy obsługiwać zdarzenia mousedown i touchstart przy użyciu jednej dyrektywy, ale w sposób kanciasty, abyśmy mogli uwzględnić wyrażenia stylów kątowych.

tak:

angular.module("ngStudentselect", []).directive('ngStudentselect', ['$parse', '$timeout', '$rootElement', 
function($parse, $timeout, $rootElement) { 
    return function(scope, element, attr) { 
     var clickHandler = $parse(attr.ngStudentselect); 

     element.on('mousedown touchstart', function(event) { 
      scope.$apply(function() { 
       clickHandler(scope, {$event: event}); 
      }); 
     }); 
    }; 
}]); 

Jest to okrojona wersja dyrektywy ngClick kątowej za.