非输入字段上的角度JS和ng-keydown？
[英]angular JS and ng-keydown on non input field?
问题描述
OK I'm loading a template into a ng-include like so: 
确定，我正在将模板加载到ng-include中，如下所示：
<about ng-click="loadpantone()"></about>
<div class="pantone_wrapper">
<div ng-include="template" tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)" ng-class="PrevNext" class="pantoneani remo pantonebg blue" ></div>
</div>
directive about: 关于以下内容的指令：
'use strict';
/*global $:false */
angular.module('bawdApp')
.directive('about', function () {
return {
templateUrl: 'views/pantone-inner.html',
restrict: 'AE',
link: function postLink($scope, element) {
function border(valueWidth){
$('.page_cont_wrap').css('border', valueWidth+'px solid #aaFFFF');
}
$(element).css({'position': 'absolute'}).delay(200).animate({
'margin-left': '-160px',
'margin-top': '-233px',
'left': '50%',
'top': '50%'
}, 200);
$scope.loadpantone = function loadpantone(){
border(0);
$scope.template = $scope.pantonesAbout[0].url;
$('.top_left_logo.white img').css('position', 'fixed');
};
}
};
});
directive that then deals with the content in the ng-include loaded content: 指令然后处理ng-include加载的内容中的内容：
'use strict';
/*global $:false */
angular.module('bawdApp')
.directive('pantoneMenu', function () {
return {
templateUrl: 'views/pantone_menu.html',
restrict: 'AE',
transclude: true,
link: function($scope, $document) {
var arraylength = $scope.pantonesAbout.length;
function next(){
$scope.$parent.pantoneconter = $scope.$parent.pantoneconter + 1;
$scope.$parent.PrevNext = 'next';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
}
function prev(){
var arraylength = $scope.pantonesAbout.length;
$scope.$parent.pantoneconter --;
$scope.$parent.PrevNext = 'prev';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else if ($scope.$parent.pantoneconter < 0){
$scope.$parent.pantoneconter = arraylength -1;
$scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
}
else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
}
$scope.close = function close(){
$scope.$parent.template = '';
$('.remo').addClass('pantoneani');
$('.top_left_logo.white img').css('position', 'relative');
};
$scope.nextpro = function nextpro(){
next();
};
$scope.prevpro = function prevpro(){
prev();
};
/* $(document).on('keyup',function(e){
function plusone(){
$scope.$parent.pantoneconter = $scope.$parent.pantoneconter + 1;
}
if(e.which === 37){
$scope.$apply(function () {
var arraylength = $scope.pantonesAbout.length;
$scope.$parent.pantoneconter --;
$scope.$parent.PrevNext = 'prev';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else if ($scope.$parent.pantoneconter < 0){
$scope.$parent.pantoneconter = arraylength -1;
$scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
}
else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
});
}
if(e.which === 39){
$scope.$apply(function () {
plusone();
$scope.$parent.PrevNext = 'next';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
});
}
});*/
}
};
});
about controller: 关于控制器：
'use strict';
angular.module('bawdApp')
.controller('AboutCtrl', function ($scope) {
$scope.pantonesAbout = [
{name:'Pantone intro', url:'views/pantone_about.html'},
{name:'Pantone one', url:'views/about_patone_one.html'},
{name:'Pantone two', url:'views/about_patone_two.html'},
{name:'Pantone three', url:'views/about_patone_three.html'},
{name:'Pantone four', url:'views/about_patone_four.html'},
{name:'Pantone five', url:'views/about_patone_five.html'},
];
$scope.pantoneconter = 0;
});
loaded content includes: pantone_menu.html 加载的内容包括：pantone_menu.html
<section>
<div tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)"> prev next!</div>
<header>
<a ng-href="#" class="top_left_logo white"><img src="images/logo_white.png" alt="BAWD Logo"></a>
<p ng-click="close()">close</p>
</header>
<div ng-click="prevpro()"><p>prev</p></div>
<div ng-click="nextpro()"><p>next</p></div>
</section>
I have been fighting all day with ng-keydown I need it to load into the pantone_menu.html directive and have the user be able to click left or right and it then to work the same as prev and next the only way I've been able to do it currently is using jquerylite like so: 我整天都在与ng-keydown战斗，我需要它加载到pantone_menu.html指令中，并让用户能够向左或向右单击，然后才能像上一个和下一个一样工作，这是我一直以来唯一的方法。能够做到这一点目前正在使用jquerylite像这样：
$(document).on('keyup',function(e){
function plusone(){
$scope.$parent.pantoneconter = $scope.$parent.pantoneconter + 1;
}
if(e.which === 37){
$scope.$apply(function () {
var arraylength = $scope.pantonesAbout.length;
$scope.$parent.pantoneconter --;
$scope.$parent.PrevNext = 'prev';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else if ($scope.$parent.pantoneconter < 0){
$scope.$parent.pantoneconter = arraylength -1;
$scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
}
else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
});
}
if(e.which === 39){
$scope.$apply(function () {
plusone();
$scope.$parent.PrevNext = 'next';
if($scope.$parent.pantoneconter >= arraylength){
$scope.$parent.pantoneconter = 0;
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}else{
$scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
}
});
}
});
but I really want to be able to do it via angularJS I've tried using tabindex="0" in my pantone menu and this then works when i actually click the element it focuses and I can get it to console.log: in pantone_menu.html: prev next! 但是我真的很想能够通过angularJS做到这一点，我已经尝试在pantone菜单中使用tabindex =“ 0”了，然后当我实际单击它关注的元素并将其发送到console.log时，此方法才能起作用：在pantone_menu中： .html：上一个下一个！
pantone_menu directive: pantone_menu指令：
$scope.keypress = function keypress(){
console.log('keyCode');
};
Now this works but only when i focus(IE click on the element) I need it to work as soon as the pantone_menu loads.. how? 现在这有效，但是只有当我聚焦（即单击元素）时，我才需要pantone_menu加载后才能起作用。 this is driving me nuts! 这让我发疯！ Note: I'm loading angularJS-ui aswell but no luck... as asked plnkr As you can see if you un-comment out line 79 to 112 it will work buut it then erros on one of the scopes and it just seems wrong to do it like this? 注意：我也正在加载angularJS-ui，但是没有运...按要求plnkr如您所见，如果您取消注释第79至112行，它将正常运行，然后在其中一个作用域上出错，这似乎是错误的这样做吗？
1 个解决方案
解决方案1
1 已采纳 2014-02-09 19:21:43
Did you try focusing on the element via JS ? 您是否尝试通过JS专注于元素？
In jquery it looks somthing like this, element.focus() :-) 在jQuery中，看起来像这样，element.focus（）:-)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.