0
OK我加載一個模板到NG-包括像這樣：在非輸入字段上的角JS和ng-keydown？
<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-包括加載內容的內容涉及：
'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
<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和next唯一的辦法我已經能夠做到目前它正在使用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;
}
});
}
});
，但我真的想通過angularJS我能夠做到這一點」已經嘗試在我的pantone菜單中使用tabindex =「0」，然後當我實際上單擊el時，這會起作用它的重點，我可以得到它console.log： 在pantone_menu.html： prev next！
pantone_menu指令：
$scope.keypress = function keypress(){
console.log('keyCode');
};
現在這個工作，但只有當我專注（即點擊的元素），我需要儘快的pantone_menu負荷工作.. 怎麼樣？ 這讓我瘋狂！ 注意：我正在加載angularJS-ui，但也沒有運氣...... 詢問plnkr 正如你可以看到如果你不註釋掉第79行到第112行，它會工作buut它然後erros在一個範圍和它這樣做似乎是錯誤的？
你可以爲此創建一個pluknr或fiddl嗎？這是很多代碼... – michael
我會基本上嘗試所有我需要做的事情，當它通過ng-include加載時強制關注div元素，以便用戶能夠使用箭頭鍵導航ng-include3模板...我已經能夠通過jquery lite hack來做到這一點，但它只是不覺得正確...我會嘗試並提出一個小提琴 – vimes1984