我是 angularjs 的初学者,我试图理解为什么当用户按下空格键时我的组件(带有字体图标的“复选框模拟”)向下滚动页面。
这是我的组件:
ugoFmk.component('ugoFmkCheck', {
bindings: {
label: '<',
isSelected: '<',
isToggleOnKeypress: '<',
toggleCheck: '&',
checkedClass: '<',
uncheckedClass: '<'
},
controller: function ugoCheckController() {
var vm = this;
vm.$onInit = function () {
if (vm.isToggleOnKeypress === undefined)
vm.isToggleOnKeypress = true;
if (vm.checkedClass === undefined)
vm.checkedClass = 'fa fa-check-square-o';
if (vm.uncheckedClass === undefined)
vm.uncheckedClass = 'fa fa-square-o';
}
vm.getCheckboxClass = function () {
return vm.isSelected ? vm.checkedClass : vm.uncheckedClass;
}
vm.runOnKeyPress = function (e) {
if (vm.isToggleOnKeypress === false)
return;
if (e.which === 32)
vm.toggleCheck();
}
},
template: "<span tabindex='0' ng-keypress='$ctrl.runOnKeyPress($event);' ng-click='$ctrl.toggleCheck()'><i ng-class=\"$ctrl.getCheckboxClass()\"></i> {{$ctrl.label}}</span>"
});
及其用途:
<div class="col-lg-offset-1 col-lg-3" ng-class="{'has-error': vm.hasCiviliteError()}">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="spnCivilite">Civilité</span>
<div tabindex="0" class="form-control" name="divCivilite" id="divCivilite" ng-focus="vm.makeCiviliteDirty()" ng-blur="vm.makeCiviliteDirty()">
<ugo-fmk-check ng-repeat="opt in vm.civilites"
is-selected="opt.selected"
toggle-check="vm.selectCivilite(opt.Code)"
label="opt.Code"
style="margin-right:20px"
ng-focus="vm.makeCiviliteDirty(false)"
ng-blur="vm.makeCiviliteDirty(true)"
ng-class="{'color-placeholder':!opt.selected}"></ugo-fmk-check>
</div>
<i class="glyphicon glyphicon-remove form-control-feedback" ng-show="vm.hasCiviliteError()"></i>
</div>
<div ng-show="vm.hasCiviliteError()" class="text-danger small">
<span>* Cette zone est obligatoire</span>
</div>
最佳答案
使用空格键滚动到页面末尾是大多数浏览器/网站的标准行为。
这里提出了一个快速简单的解决方案/修复:HTML prevent space bar from scrolling page
关于javascript - ng-keypress 事件向下滚动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42364652/