Событие ng-keypress прокручивает страницу вниз

Question

Я начинаю с 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> 

и результат:

Answer 1

скроллинг до конца страницы с пробела стандартное поведение большинства браузеров/веб-сайтов ,

Быстрое и простое решение/исправить к этому предлагается здесь: HTML prevent space bar from scrolling page