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 app中，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 =＆＃34;设置＆＃34;被翻译成href =＆＃34; / settings＆＃34; UI-SREF =＆＃34;设置＆＃34;

Answer 1

创建一个函数并传递一个参数，用于定义您想要去的位置。

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

并在控制器中检查按下的键和你想去的地方：

$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来处理，但是另外一个功能可以用来处理按空格键。

Answer 2

所以，看起来答案是真正面向UI-Router的：

1）在AngularJS .run中将ui-router $状态放在$ rootScope上 2）在AngularJS .controller中创建调用UI-Router $ 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>

AngularJS在空格键按下（ui-router）调用href

2 个答案: