角JS和NG-的keydown非输入字段？ [英] angular JS and ng-keydown on non input field?
问题描述
OK我加载一个模板到NG-包括像这样：
OK I'm loading a template into a ng-include like so:
<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>
指令一下：
'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');
};
}
};
});
指令，然后在NG-包括加载内容的内容涉及：
directive that then deals with the content in the ng-include loaded content:
'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;
}
});
}
});*/
}
};
});
有关控制器：
'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;
});
加载内容包括：
pantone_menu.html
loaded content includes: 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>
我一直在争取与NG-的keydown整天我需要它加载到pantone_menu.html指令，并让用户能够点击左边或右边，然后它的工作一样preV和旁边的只有我已经能够做到目前它的方法是使用jquerylite像这样：
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:
$(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;
}
});
}
});
但我真的希望能够通过angularJS做到这一点我在我的PANTONE菜单中使用的tabindex =0尝试和当我实际点击它侧重的元素，我可以得到它CONSOLE.LOG这个作品，然后：
在pantone_menu.html：
preV下！
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!
pantone_menu指令：
pantone_menu directive:
$scope.keypress = function keypress(){
console.log('keyCode');
};
现在这个工作，但只有当我集中（在元素上即点击）我需要它尽快pantone_menu负荷工作..
怎么样？
这是推动我疯了！
注：我加载angularJS的UI藏汉但没有运气...
如问 plnkr
正如你可以看到，如果你未注释掉线79到112，将工作buut它然后在示波器的一个误差修改，它只是似乎是错误的像这样做？
Now this works but only when i focus(I.E click on the element) I need it to work as soon as the pantone_menu loads.. how? 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?
推荐答案
你尝试聚焦元素通过JS？
Did you try focusing on the element via JS ?
在jQuery的，它看起来像财产以后这样，element.focus（）： - ）
In jquery it looks somthing like this, element.focus() :-)
这篇关于角JS和NG-的keydown非输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
