2016-09-16 2 views
0

기본 AngularJS가 아닌 다른 라이브러리없이 이미지 회전식 지시문을 작성하고 있습니다.AngularJS : 컨트롤러에서 지시어의 DOM 요소에 액세스하십시오.

simpleCarousel.$inject = []; 

function simpleCarousel() { 
    var directive = { 
     restrict: 'E', 
     templateUrl: 'someurl.html', 
     scope: { 
      // Scope variables 
     }, 
     controller: simpleCarouselController, 
     controllerAs: 'ctrl', 
     bindToController: true 
    }; 
    simpleCarouselController.$inject = []; 
    function simpleCarouselController() { 
     angular.extend(this, { 
      next : //handle next image sliding 
      prev : //handle previous image sliding 
     }); 
     function detectSwipe(el) { 
      var touchsurface = el, 
       swipeDirection, 
       startX, 
       distX, 
       threshold = 150, 
       allowedTime = 2000, 
       elapsedTime, 
       startTime; 

      touchsurface.addEventListener('touchstart', function(e) { 
       var touchObject = e.changedTouches[0]; 
       swipeDirection = 'none'; 
       distX = 0; 
       startX = touchObject.pageX; 
       startTime = new Date().getTime(); 
       e.preventDefault(); 
      }, false); 
      touchsurface.addEventListener('touchmove', function(e) { 
       e.preventDefault(); 
      }, false); 
      touchsurface.addEventListener('touchend', function(e) { 
       var touchObject = e.changedTouches[0]; 
       distX = touchObject.pageX - startX; 
       elapsedTime = new Date().getTime() - startTime; 
       if (distX > 0) { 
        swipeDirection = 'right'; 
        return swipeDirection; 
       } else if (distX < 0) { 
        swipeDirection = 'left'; 
        return swipeDirection; 
       } else { 
        return false; 
       } 
      }, false); 
     } 
    } 
} 

나는 터치 이벤트에 대한 이벤트 처리기를 작성했습니다. 하지만 터치 이벤트에 요소를 전달하려면 어떻게해야합니까? 또한 JS를 사용하여 슬라이딩 또는 CSS 사용자 선택 속성에서 사용자 클릭 방지를 처리해야합니까?

+1

당신이 인수로이 지시어는 – Dario

+0

@Dario 일치하는 요소가 어디 당신은, 지시어의'''link''' 기능을 사용할 수 있습니다 우리는 지시어뿐만 아니라 링크 기능 및 컨트롤러를 선언 할 수 있습니다? –

+0

예, 하나의 지시문에 컴파일, 링크 및 컨트롤러 기능이있을 수 있습니다. 링크 함수는 DOM을 수정하고 이벤트 리스너를 첨부해야하는 곳입니다. – Dario

답변

-1

일반적으로 컨트롤러에 이벤트 처리기를 연결하는 것은 좋지 않은 것으로 간주되며 권장하지 않습니다.

또한 스누핑을 감지하려면 ngTouch를 체크 아웃해야 할 수 있습니다.

https://docs.angularjs.org/api/ngTouch

관련 문제