好的我正在将模板加载到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>
指令：
'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-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;
}
});
}
});*/
}
};
});
关于控制器：
'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相同，然后我唯一的方式能够做到这一点目前正在使用像这样的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”然后当我实际点击它聚焦的元素时我会将它运行到console.log ： 在pantone_menu.html中： prev next！
pantone_menu指令：
$scope.keypress = function keypress(){
console.log('keyCode');
};
现在这个有效，但只有当我专注（I.E点击元素）时，我需要它在pantone_menu加载时立即工作.. 怎么样？ 这让我疯了！ 注意：我正在加载angularJS-ui，但没有运气...... 问plnkr 你可以看到如果你取消注释掉第79行到第112行，那么它会在其中一个示波器上发挥作用，然后像这样做似乎是错误的吗？
答案 0 :(得分：1)
您是否尝试通过JS专注于元素？
在jquery中它看起来像这样，element.focus（）： - ）