У меня есть var в моем $scope, и мне нужно уменьшить его при прокрутке вверх и увеличении при прокрутке вниз. Как я могу это сделать? Должен ли я использовать свиток js? Есть ли способ не изобретать велосипед?Угловое изменение var на прокрутке
Ваш вопрос не ясен, но, если я правильно понимаю вы хотите увеличить/уменьшить счетчик на основе направления прокрутки.
, как вы можете к нему, нажав на «свитка» (JQuery) события, как:
angular.element($window).on('scroll', function(event) {
// Do something here.
});
Лучше вы можете написать пользовательскую директиву, которая бы это и испускать пользовательское событие, а затем вы может слушать это событие в вашем контроллере и действовать на него.
Примечание. Вы также можете отменить событие прокрутки.
P.S. : Пожалуйста, всегда предоставляйте фрагмент кода или jsfiddle/codepen, чтобы другие могли лучше понять ваш вопрос.
angular.module('app', [])
.controller('MainController', function($rootScope, $scope) {
var changeBy = 5;
$scope.scrollCounter = 0;
// Tap into custom 'scrollHappened' event.
$rootScope.$on('scrollHappened', function(event, scrollUpHappened) {
// If the scroll direction is 'down'.
if (scrollUpHappened) {
$scope.scrollCounter += changeBy;
} else { // Scroll direction is 'up'.
$scope.scrollCounter -= changeBy;
}
});
})
.directive('scrollCounter', function($rootScope, $window) {
return {
restrict: 'A',
link: function() {
var lastScrollPos = 0;
// Add a scroll event on $window object.
angular.element($window).on('scroll', function(event) {
console.log(angular.element(event.target))
var scrollPos = angular.element(event.target).scrollTop();
// Emit custom 'scrollHappened' event.
$rootScope.$emit('scrollHappened', (scrollPos > lastScrollPos));
// As all this is happening outside of the angular world
// wrap the update logic inside $apply, so that update will
// be visible to the angular.
$rootScope.$apply(function() {
lastScrollPos = scrollPos;
});
});
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="MainController">
<div scroll-counter="" style="height: 400px">
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
<span>Current scroll counter = {{ scrollCounter }}</span>
<br/><br/>
</div>
</div>Используйте javascript window.scrollTo функцию.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 5000px;
height: 5000px;
}
</style>
</head>
<body>
<p>Click the button to scroll</p>
<button onclick="scrollWin()">Click me to scroll</button><br><br>
<script>
function scrollWin() {
window.scrollTo(0, 1000);
}
</script>
</body>
</html>Извините, я не сказал, но мне нужно увеличить/уменьшить его на фиксированное значение. Например, если у меня есть '$ scope.var = 10' и' $ scope.changevalue = 5', тогда мне нужно иметь 15/5 в прокрутке вниз/вверх в качестве результата. – Cheephs
, так что вы проголосовали за него ???? –
нет, я не !!!! – Cheephs
Обеспечить jsfiddle/plunker или, по крайней мере, фрагмент кода. –