如何在 AngularJS 中监听单击并按住? [英] How can I listen for a click-and-hold in AngularJS?
问题描述
我制作了一个时间计数器,您可以通过单击按钮来增加或减少时间.然而,我希望当我点击并按住按钮时,时间的值会不断攀升.
所以目前如果你每次点击向上按钮时看到我的 Plunkr增加,但我想要这个,所以当我按住按钮时,值会增加 1,2,3,4,5,6,7,8
直到我松开按钮.
我怎样才能实现这样的目标?
{{ 时间 |时间过滤器 }}<div class="btn-group btn-group-sm"><button class="btn btn-default" ng-mousedown='mouseDown()' ng-mouseup="mouseUp()"><i class="fa fa-caret-up"></i>按钮><button class="btn btn-default" ng-click="Time = Time - 1"><i class="fa fa-caret-down"></i>按钮>
在 $interval 中使用 ng-mouseDown 和 ng-mouseup 指令
app.directive('time', function ($interval) {返回 {templateUrl: 'time.html',限制:'E',范围: {时间:'=值'},链接:函数(范围、元素、属性){element.addClass('时间');无功承诺;scope.mouseDown = 函数(){如果(承诺){$interval.cancel(承诺);}承诺 = $interval(function () {范围.时间++;}, 100);};scope.mouseUp = 函数 () {$interval.cancel(承诺);承诺=空;};}};});
I have made a time conter which allows you to increase or decrease the time by clicking a button. I would like however that when I click and hold the button the value of the time would keep climbing.
So currently if you see my Plunkr each time I click the up button the value increases but I want this so when I hold the button down the value increases 1,2,3,4,5,6,7,8
until I release the button.
How could I achieve something like this?
<span class="time">{{ Time | timeFilter }}</span>
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-mousedown='mouseDown()' ng-mouseup="mouseUp()">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default" ng-click="Time = Time - 1">
<i class="fa fa-caret-down"></i>
</button>
</div>
Use ng-mouseDown and ng-mouseup directive with $interval
app.directive('time', function ($interval) {
return {
templateUrl: 'time.html',
restrict: 'E',
scope: {
Time: '=value'
},
link: function (scope, element, attrs) {
element.addClass('time');
var promise;
scope.mouseDown = function() {
if(promise){
$interval.cancel(promise);
}
promise = $interval(function () {
scope.Time++;
}, 100);
};
scope.mouseUp = function () {
$interval.cancel(promise);
promise = null;
};
}
};
});
这篇关于如何在 AngularJS 中监听单击并按住?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!