Javascript AngularJS在空格键上调用href（ui路由器）

怎么办？空格键=32也许空格键陷阱在角度上很棘手？一些排列：

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中，路由器是主菜单处理程序，因此我有如下链接：

<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>

创建一个函数并传递一个参数，该参数定义了您要去的位置

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

当您用光标单击链接时，您仍然可以包括要处理的ui路由器，但是一个附加功能可能是处理空格键按下的方法。
因此，看起来答案是，真正面向ui路由器的是：

1） 在$rootScope上运行PlaceUI路由器$state
2） 在AngularJS.controller中创建调用UI路由器$state.go（locationToGo）的函数
3） 为调试添加一些$stateNotFound错误处理

angular
  .module('MainApp', [
    'ui.bootstrap',
    'ui.utils',
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    $stateProvider
      .state('home', {
        url: "/",
        templateUrl: 'home/home.html'
      })
      .state('settings', {
        url: "/settings",
        templateUrl: 'settings/settings.html'
      });

    $urlRouterProvider.when('', '/');
    $urlRouterProvider.otherwise("/error?code=404");
  })
  .run(function($rootScope, $state, $stateParams, $log) {
    'use strict';

    $state.transitionTo('home');
    // You need to put $state on $rootScope to access it in controller
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateNotFound', 
      function(event, unfoundState, fromState, fromParams) {
        $log.log(unfoundState.to); // "unknown.state"
        $log.log(unfoundState.toParams); // {a:1, b:2}
        $log.log(unfoundState.options); // {inherit:false} + default options
      $state.go("error?code=404");
    });
  })
  .controller('MainController', function ($scope, $state, $log) {
    'use strict';

    $scope.goToOnSpace = function (event, locationToGo) {
      if (event.keyCode === 32) {
        $log.log(locationToGo);
        $state.go(locationToGo);
      }
    };
});

HTML代码如下所示：

<li role="presentation">
  <a id="settings-item" ui-sref="settings" tabindex="-1" 
     data-ng-keypress="goToOnSpace($event, 'settings')" 
     role="menuitem">&nbsp;&nbsp;Settings</a>
</li>


设置

对于初学者，请使用“$event.keyCode==32”中的“inside”/settings:“null”

感谢您指出原始引号。我用合理的引语更新了整个问题排列。还没有乐趣。你最好调用一个函数，比如

ng keyup=“spaceBarHandler（）”

，然后在你的控制器中，通过那里处理这个函数。下面是一个很长的答案，但这个简短的答案有效

data ng keyup=“$event.keyCode==32？$state.go（'userLogin'）：null”

尝试了这个，没有乐趣。在我的小应用程序中，“window.location.href='/'+locationToGo；”实际上已经足够了（如果需要的话可以不用），因为菜单的根目录是“/home”而不是“/”。但是我尝试的$location.path（'/settings'）和您提到的window.location.href无法完成任务。谢谢你@Brad Sturtevant你能做一个jsfiddle，这样我们就可以试着从那里做一些东西吗？没问题！有一些javascript库是我的应用程序的一部分，它们没有CDN（和重要的引导可访问性插件，PayPal可访问性团队的v1.0.3），但可以毫无问题地集中精力。花我一天时间…GitHub:git克隆这段代码需要Yeoman，Bower，Grunt，更少。我注意到，如果我包括Paypal可访问性插件，navbar中的主要选项卡确实可以使用与您提到的代码非常相似的代码。UI路由器确实需要window.location.href='/#/'+locationToGo。但在下拉菜单中不起作用。也许这是因为drop的作用域与主导航栏不同？Paypal可访问性插件在Plunker中不可用，因为没有CDN：（我还没有克隆git。但是我检查了Plunker中的下拉列表，它可以按预期与空格键一起工作，至少在设置和主题链接（而不是显示密度）方面是这样的。如果我理解正确，这两个链接（搜索和主题），当Paypal插件存在时不工作？简短的回答是

data ng keyup=“$event.keyCode==32？$state.go（'userLogin'）：null”

<li role="presentation">
  <a id="settings-item" ui-sref="settings" tabindex="-1" 
     data-ng-keypress="goToOnSpace($event, 'settings')" 
     role="menuitem">&nbsp;&nbsp;Settings</a>
</li>