javascript - AngularJS 按空格键调用 href (ui-router)

Question

怎么办？空格键 = 32 也许空格键陷阱在 Angular 中很棘手？一些排列:

ng-keyup="$event.keyCode == 32 ? '/settings' : null" 
ng-keyup="$event.keyCode == 32 ? '#/settings' : null" 
ng-keyup="$event.keyCode == 32 ? $eval('/settings') : null" 
ng-keyup="$event.keyCode == 32 ? $eval('#/settings') : null" 
ng-keyup="$event.keyCode == 32 ? $eval(/settings) : null" 
ng-keyup="$event.keyCode == 32 ? go('/settings') : null" 
ng-keyup="$event.keyCode == 32 ? go('#/settings') : null" 
ng-keyup="$event.keyCode == 32 ? go(#/settings) : null" 
ng-keyup="$event.keyCode == 32 ? $location.path('/settings') : null" 
ng-keyup="$event.keyCode == 32 ? $location.path('#/settings') : null" 
ng-keyup="$event.keyCode == 32 ? javascript:angular.element(document.getElementById('MainController'))).scope().go('#/settings') : null" 
ng-keyup="$event.keyCode == 32 ? javascript:angular.element(document.getElementById('MainController'))).scope().go('#/settings') : null" 

在我的 AngularJS/Bootstrap/FontAwesone 应用程序中，ui-router 是主菜单处理程序，因此我有如下链接:

<li role="presentation">
  <a id="settings-tab" ui-sref="settings" tabindex="2" role="tab"
    ng-keyup="$event.keyCode == 32 ? go('/settings') : null" 
  <span class="fa fa-cog fa-fw"></span>Settings</a>
</li>

使用 ui-router，ui-sref="settings"会转换为 href="/settings"ui-sref="setting"

Answer 1

创建一个函数并传递一个参数来定义您要去的位置。

<a ui-sref="settings" ng-keypress="goToOnSpace($event, 'settings')">My link</a>

并在 Controller 中检查按下的键以及您想要前往的位置:

$scope.goToOnSpace = function (e, locationToGo) {
    if (event.keyCode === 32 || event.charCode === 32) {
        // Code that checks additional Parameter to go to requested link
        if(locationToGo === "home"){
            window.location.href = '/#/';
        } else {
            window.location.href = '/#/' + locationToGo;
        }
    }
};

当您用光标单击链接时，您仍然可以包含 ui-router 来处理，但可以使用附加函数来处理空格键按下的情况。