AngularJS에서 onKeyUp을 검출하려면 어떻게 해야 합니까?
AngularJS에서 onKeyUp을 검출하려면 어떻게 해야 합니까?
ngChange와 비슷한 'ngOnkeyup' 디렉티브를 찾고 있는데 마땅한 것을 찾을 수 없습니다.
이러한 지시가 없는 경우 브라우저 네이티브의 onkeyup 이벤트에서 컨트롤러를 호출하는 깔끔한 방법이 있습니까?
현재 이 기능을 찾고 있는 모든 사용자는 공식 ng-keyup 명령을 사용하십시오.
<input type="text" ng-keyup="{expression}" />
편집: 새로운 내장 ng-keyup 디렉티브를 참조하는 maklemenz의 두 번째 답변을 참조하십시오.
angular-ui 라이브러리를 사용할 수 있습니다.
각의는 그냥 이렇게 하면 돼요.
<input ui-event="{keyup: 'myFn($event)'}"
다른 라이브러리를 사용하지 않는 경우 가장 효율적이고 간단한 방법은 다음과 같습니다.
JS
myApp.directive('onKeyup', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function() {
scope.$apply(attrs.onKeyup);
});
};
});
HTML:
<input on-keyup="count = count + 1">
편집: 누른 키를 감지하려면 두 가지 기본 옵션을 사용할 수 있습니다.디렉티브에 Atribut을 추가하여 디렉티브 내에서 허용된 키를 처리할 수도 있고 누른 키를 컨트롤러에 전달할 수도 있습니다.나는 일반적으로 지시적 핸들 키 방식을 추천한다.
다음은 두 가지 방법의 예입니다.http://jsfiddle.net/bYUa3/2
기본 지시문이 충분하지 않은 경우 사용자 지정 지시문을 생성해야 합니다.아마 이런 거겠죠?
<!doctype html>
<html lang="en" ng-app="app">
<body ng-controller="ctrl">
<input ng-onkeyup="keyup()"/>
<script src="js/lib/angular-1.0.0.min.js"></script>
<script>
angular.module('app', []).directive('ngOnkeyup', function() {
return {
restrict: 'A',
scope: {
func: '&ngOnkeyup'
},
link: function( scope, elem, attrs ) {
elem.bind('keyup', scope.func);
}
};
});
function ctrl($scope) {
$scope.keyup = function() {
alert('keyup fired');
};
}
</script>
</body>
</html>
이미 언급한 이벤트 바인더 외에 Angular UI에서 다음과 같은 편리한 ui-key* 지침을 사용할 수 있습니다.
<textarea
ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>
<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>
http://angular-ui.github.io/ #/directives-keypress
나처럼 특정 열쇠로만 이벤트를 진행하려는 사람을 돕기 위해서야다음은 다음을 사용하는 코드입니다.ng-keyup그것은 나의cancel()Escape를 누를 때만 작동합니다.원하는 키코드를 알아보려면 이 웹 사이트를 방문하십시오.
ng-keyup="$event.keyCode == 27 ? cancel() : ''"
@maklemenz가 언급했듯이 이것은 현재 사용 가능한 내장된 Angular 디렉티브를 사용합니다.
참고로 오늘 이것을 검색했는데 Angular의 github에 키업 키 다운 문제에 대처하는 브랜치가 있는 것 같습니다.
https://github.com/angular/angular.js/pull/1622
마스터로 통합되었습니다...단, 1.1.3까지는 릴리즈에 표시되지 않을 것으로 보입니다.
ng-keyup 옵션을 사용하여 각도를 작성하려면 git에서 코드를 다운로드하여 실행할 수 있습니다.rake package폴더상에 있습니다.에서는 Node하는 것을 또, 아마 의 홉포크 이 Node.js 루비에서 에러가 발생했습니다.
그래도 결국엔 '빌트인' 키업을 받았어요.
제가 당신의 질문을 정확히 이해한다면, 당신은 ng-keyup 디렉티브를 찾고 있는 것입니다.다음은 링크입니다.http://docs.angularjs.org/api/ng.directive:ngKeyup
제 답변이 너무 늦은 건 알지만 몇몇 사람들에게 도움이 되었으면 좋겠어요.빠르고 쉬운 방법을 찾는 경우 다음을 사용할 수 있습니다.
// in the controller
// get element by id, you can use by class...
var element = angular.element('#element');
element.keyup(function () {
console.log('keyup fired');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input id="element" type="text" />언급URL : https://stackoverflow.com/questions/11264188/how-can-i-detect-onkeyup-in-angularjs
'programing' 카테고리의 다른 글
| 웹 사이트의 특정 부분만 iframe에 넣는 방법은 무엇입니까? (0) | 2023.04.05 |
|---|---|
| angularjs가 있는 뷰에서 ng-if 값을 사용하여 null을 확인하는 방법 (0) | 2023.04.05 |
| $location 내에서 매개 변수를 전달하고 있습니다.각도에서의 경로 (0) | 2023.03.31 |
| XMLHttpRequest의 onerror 핸들러를 기동하는 타이밍 (0) | 2023.03.31 |
| 동일한 디렉티브의 링크 함수 내에서 디렉티브 컨트롤러의 기능 사용 (0) | 2023.03.31 |