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?
Вы можете использовать '' 'link''' функцию директивы, где вы должны в качестве аргумента элемент, что эта директива соответствует – Dario
@Dario, мы можем объявить функции связи и контроллер, а также для директивы? –
Да, конечно, одна директива может иметь функции компиляции, ссылки и контроллера. Функция Link - это то, где вы должны изменить DOM и присоединить прослушиватели событий. – Dario