각도란글로벌 키보드 단축키를 만드는 JS 방법
지시문을 사용해야 할 것 같습니다만, 본문에 지시문을 추가하는 것은 이상하지만, 문서상으로는 이벤트를 듣습니다.
어떻게 하면 좋을까요?
업데이트: 각도 발견JS UI를 통해 키 누르기 명령이 실현되었습니다.
나는 그것을 지령에 추가하는 것이 더 적절한 방법이라고 말할 것이다.간단한 . ( 덧붙이면 됩니다.)keypress-events <body>
angular.module('myDirectives', []).directive('keypressEvents', [
'$document',
'$rootScope',
function($document, $rootScope) {
return {
restrict: 'A',
link: function() {
$document.bind('keypress', function(e) {
console.log('Got keypress:', e.which);
$rootScope.$broadcast('keypress', e);
$rootScope.$broadcast('keypress:' + e.which, e);
});
}
};
}
]);
지시사항에서는 다음과 같은 작업을 수행할 수 있습니다.
module.directive('myDirective', [
function() {
return {
restrict: 'E',
link: function(scope, el, attrs) {
scope.keyPressed = 'no press :(';
// For listening to a keypress event with a specific code
scope.$on('keypress:13', function(onEvent, keypressEvent) {
scope.keyPressed = 'Enter';
});
// For listening to all keypress events
scope.$on('keypress', function(onEvent, keypressEvent) {
if (keypress.which === 120) {
scope.keyPressed = 'x';
}
else {
scope.keyPressed = 'Keycode: ' + keypressEvent.which;
}
});
},
template: '<h1>{{keyPressed}}</h1>'
};
}
]);
$document.bind:
function FooCtrl($scope, $document) {
...
$document.bind("keypress", function(event) {
console.debug(event)
});
...
}
아직은 장담할 수 없지만 앵글을 보기 시작했어요핫키.js:
http://chieffancypants.github.io/angular-hotkeys/
내가 그것에 관심을 갖게 되면 더 많은 정보로 업데이트 할 것이다.
업데이트 1: Nuget 패키지가 있습니다.각형 핫키
업데이트 2: 실제로 매우 사용하기 쉽습니다. 경로 또는 현재 진행 중인 컨트롤러에서 바인딩을 설정하십시오.
hotkeys.add('n', 'Create a new Category', $scope.showCreateView);
hotkeys.add('e', 'Edit the selected Category', $scope.showEditView);
hotkeys.add('d', 'Delete the selected Category', $scope.remove);
jQuery를 사용한 방법은 다음과 같습니다. 더 좋은 방법이 있을 것 같습니다.
var app = angular.module('angularjs-starter', []);
app.directive('shortcut', function() {
return {
restrict: 'E',
replace: true,
scope: true,
link: function postLink(scope, iElement, iAttrs){
jQuery(document).on('keypress', function(e){
scope.$apply(scope.keyPressed(e));
});
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.keyCode = "";
$scope.keyPressed = function(e) {
$scope.keyCode = e.which;
};
});
<body ng-controller="MainCtrl">
<shortcut></shortcut>
<h1>View keys pressed</h1>
{{keyCode}}
</body>
다음은 Angular의 예입니다.키보드 단축키용 JS 서비스: http://jsfiddle.net/firehist/nzUBg/
그런 다음 다음과 같이 사용할 수 있습니다.
function MyController($scope, $timeout, keyboardManager) {
// Bind ctrl+shift+d
keyboardManager.bind('ctrl+shift+d', function() {
console.log('Callback ctrl+shift+d');
});
}
업데이트: 대신 각도 단축키를 사용하고 있습니다.
지시로서
으로 Angular 코드에서는 즉, Angular 문서 코드에서는 Angular를 누릅니다./검색을 시작합니다.
angular
.module("app", [])
.directive("keyboard", keyboard);
function keyboard($document) {
return {
link: function(scope, element, attrs) {
$document.on("keydown", function(event) {
// if keycode...
event.stopPropagation();
event.preventDefault();
scope.$apply(function() {
// update scope...
});
}
};
}
키보드 지시어를 사용한 플랭크
http://plnkr.co/edit/C61Gnn?p=preview
서비스로서의
이 지시사항을 서비스로 전환하는 것은 매우 쉽습니다.유일한 실제 차이점은 스코프가 서비스에 공개되지 않는다는 것입니다. , 「Digest를 .$rootScope '어느 정도'를 쓰거나요.$timeout.
function Keyboard($document, $timeout, keyCodes) {
var _this = this;
this.keyHandlers = {};
$document.on("keydown", function(event) {
var keyDown = _this.keyHandlers[event.keyCode];
if (keyDown) {
event.preventDefault();
$timeout(function() {
keyDown.callback();
});
}
});
this.on = function(keyName, callback) {
var keyCode = keyCodes[keyName];
this.keyHandlers[keyCode] = { callback: callback };
return this;
};
}
으로, 「」를 사용해 할 수 .keyboard.on()★★★★★★ 。
function MainController(keyboard) {
keyboard
.on("ENTER", function() { // do something... })
.on("DELETE", function() { // do something... })
.on("SHIFT", function() { // do something... })
.on("INSERT", function() { // do something... });
}
서비스를 사용하는 대체 버전의 Plunk
http://plnkr.co/edit/z9edu5?p=preview
조금 더 짧은 답변은 아래의 솔루션 3을 살펴보는 것입니다.더 많은 옵션을 알고 싶으시면 전체 내용을 읽어보셔도 됩니다.
나는 jmagnusson의 말에 동의한다.하지만 나는 더 깨끗한 해결책이 있다고 믿는다.명령어로 함수를 사용하여 키를 바인드하는 대신 설정 파일을 정의하듯이 html로 바인드할 수 있어야 하며 단축키는 컨텍스트에 맞게 해야 합니다.
아래는 커스텀 디렉티브와 함께 마우스 트랩을 사용하는 버전입니다.(이 바이올린의 작성자는 제가 아닙니다.)
var app = angular.module('keyExample', []); app.directive('keybinding', function () { return { restrict: 'E', scope: { invoke: '&' }, link: function (scope, el, attr) { Mousetrap.bind(attr.on, scope.invoke); } }; }); app.controller('RootController', function ($scope) { $scope.gotoInbox = function () { alert('Goto Inbox'); }; }); app.controller('ChildController', function ($scope) { $scope.gotoLabel = function (label) { alert('Goto Label: ' + label); }; });mouseetrap.js를 포함해야 하며 다음과 같이 사용합니다.
<div ng-app="keyExample"> <div ng-controller="RootController"> <keybinding on="g i" invoke="gotoInbox()" /> <div ng-controller="ChildController"> <keybinding on="g l" invoke="gotoLabel('Sent')" /> </div> </div> <div>Click in here to gain focus and then try the following key strokes</div> <ul> <li>"g i" to show a "Goto Inbox" alert</li> <li>"g l" to show a "Goto Label" alert</li> </ul> </div>솔루션에서는 단축키를 정의하는 데 도움이 되는 라이브러리인 mousetrap.js를 포함해야 합니다.
독자적인 커스텀 디렉티브를 개발하는 번거로움을 피하고 싶다면 다음 lib를 체크해 주세요.
https://github.com/drahak/angular-hotkeys
그리고 이건
https://github.com/chieffancypants/angular-hotkeys
두 번째는 앱에 대해 자동으로 생성되는 단축키 치트 시트 등 조금 더 많은 기능과 유연성을 제공합니다.
업데이트: Angular UI에서 솔루션 3을 사용할 수 없습니다.
위의 솔루션과는 별도로 angului 팀이 수행한 다른 구현이 있습니다.그러나 단점은 솔루션은 각도 커뮤니티의 트렌드가 아닌 JQuery lib에 의존한다는 것입니다(각도 커뮤니티는 angularjs와 함께 제공되는 jqLite를 사용하여 과도한 기술 의존에서 벗어나려고 합니다).여기 링크가 있습니다.
사용법은 다음과 같습니다.
html에서 ui-keydown 속성을 사용하여 키와 기능을 바인드합니다.
<div class="modal-inner" ui-keydown="{
esc: 'cancelModal()',
tab: 'tabWatch($event)',
enter: 'initOrSetModel()'
}">
지시문에서 해당 기능을 범위에 추가합니다.
app.directive('yourDirective', function () {
return {
restrict: 'E',
templateUrl: 'your-html-template-address.html'
link: function(){
scope.cancelModal() = function (){
console.log('cancel modal');
};
scope.tabWatch() = function (){
console.log('tabWatch');
};
scope.initOrSetModel() = function (){
console.log('init or set model');
};
}
};
});
모든 솔루션을 가지고 논 후, 저는 Angular UI 팀이 구현한 솔루션 3을 추천하고 싶습니다.이 솔루션 3은 제가 겪었던 많은 작은 이상한 문제를 피한 것입니다.
나는 지름길을 위해 서비스를 만들었다.
외관:
angular.module('myApp.services.shortcuts', [])
.factory('Shortcuts', function($rootScope) {
var service = {};
service.trigger = function(keycode, items, element) {
// write the shortcuts logic here...
}
return service;
})
그리고 컨트롤러에 주입했습니다.
angular.module('myApp.controllers.mainCtrl', [])
.controller('mainCtrl', function($scope, $element, $document, Shortcuts) {
// whatever blah blah
$document.on('keydown', function(){
// skip if it focused in input tag
if(event.target.tagName !== "INPUT") {
Shortcuts.trigger(event.which, $scope.items, $element);
}
})
})
동작하지만 $element와 $document를 컨트롤러에 삽입하는 것을 알 수 있습니다.
이는 컨트롤러의 잘못된 관행이며 '컨트롤러의 Dont EVER access $element in the Controller' 규칙을 위반입니다.
명령어로 설정하고 'ngKeydown'과 $event를 사용하여 서비스를 트리거해야 합니다.
하지만 서비스는 괜찮은 것 같고 컨트롤러도 빨리 고쳐야겠다.
갱신:
'ng-keydown'은 입력 태그에서만 작동하는 것 같습니다.
지시문을 작성하고 $document를 삽입합니다.
angular.module('myApp.controllers.mainCtrl', [])
.directive('keyboard', function($scope, $document, Shortcuts) {
// whatever blah blah
return {
link: function(scope, element, attrs) {
scope.items = ....;// something not important
$document.on('keydown', function(){
// skip if it focused in input tag
if(event.target.tagName !== "INPUT") {
Shortcuts.trigger(event.which, scope.items, element);
}
})
}
}
})
그게 더 낫지.
guys behid ng-newsletter.com에서 이 예를 확인하세요.2048 게임을 만드는 방법에 대한 튜토리얼을 확인하세요.키보드 이벤트용 서비스를 사용하는 멋진 코드가 있습니다.
다음으로 컨트롤러에 숏컷 로직을 모두 기입하면 명령어가 다른 모든 것을 처리합니다.
지시.
.directive('shortcuts', ['$document', '$rootScope', function($document, $rootScope) {
$rootScope.shortcuts = [];
$document.on('keydown', function(e) {
// Skip if it focused in input tag.
if (event.target.tagName !== "INPUT") {
$rootScope.shortcuts.forEach(function(eventHandler) {
// Skip if it focused in input tag.
if (event.target.tagName !== 'INPUT' && eventHandler)
eventHandler(e.originalEvent, e)
});
}
})
return {
restrict: 'A',
scope: {
'shortcuts': '&'
},
link: function(scope, element, attrs) {
$rootScope.shortcuts.push(scope.shortcuts());
}
};
}])
컨트롤러
$scope.keyUp = function(key) {
// H.
if (72 == key.keyCode)
$scope.toggleHelp();
};
HTML
<div shortcuts="keyUp">
<!-- Stuff -->
</div>
이 라이브러리를 사용하면 단축키를 쉽게 관리할 수 있으며, 앱을 탐색할 때 키가 자동으로 바인딩 및 바인딩 해제됩니다.
이게 정말 각진 방법인지는 모르겠지만
$(document).on('keydown', function(e) {
$('.button[data-key=' + String.fromCharCode(e.which) + ']').click();
});
<div class="button" data-key="1" ng-click="clickHandler($event)">
ButtonLabel
</div>
언급URL : https://stackoverflow.com/questions/15044494/what-is-angularjs-way-to-create-global-keyboard-shortcuts
'programing' 카테고리의 다른 글
| 클래스에 캐스팅할 수 없습니다. 이름이 없는 로더 'app' 모듈에 있습니다. (0) | 2023.04.02 |
|---|---|
| angular.grid를 작성하기 위한 ng-timeout (0) | 2023.04.02 |
| WordPress RSS 피드를 표시하는 방법 (0) | 2023.04.02 |
| 리액트 라우터 V4를 사용하여 프로그램 탐색 (0) | 2023.04.02 |
| 오라클 시퀀스의 현재 값을 증가시키지 않고 취득하려면 어떻게 해야 합니까? (0) | 2023.04.02 |