AngularJS 이벤트

❮ 이전의 다음 ❯

AngularJS에는 자체 HTML 이벤트 지시문이 있습니다.

AngularJS 이벤트

다음 지시문 중 하나 이상을 사용하여 HTML 요소에 AngularJS 이벤트 리스너를 추가할 수 있습니다.

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

이벤트 지시문을 사용하면 특정 사용자 이벤트에서 AngularJS 기능을 실행할 수 있습니다.

AngularJS 이벤트는 HTML 이벤트를 덮어쓰지 않으며 두 이벤트 모두 실행됩니다.

마우스 이벤트

마우스 이벤트는 커서가 요소 위로 이동할 때 다음 순서로 발생합니다.

마우스오버
마우스 입력
ng-mousemove
ng-마우스 나가기

또는 요소에서 마우스 버튼을 클릭하면 다음과 같은 순서로 수행됩니다.

마우스 다운
마우스 업
클릭의

모든 HTML 요소에 마우스 이벤트를 추가할 수 있습니다.

예시

마우스가 H1 요소 위로 이동할 때 count 변수를 늘립니다.

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

클릭 지시문

이 ng-click 지시문은 요소를 클릭할 때 실행될 AngularJS 코드를 정의합니다.

예시

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

다음 함수를 참조할 수도 있습니다.

예시

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>

토글, 참/거짓

버튼을 클릭할 때 HTML 코드 섹션을 표시하고 드롭다운 메뉴와 같이 버튼을 다시 클릭할 때 숨기려면 버튼이 토글 스위치처럼 작동하도록 합니다.

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

변수 는 showMe부울 값으로 시작합니다 false.

이 myFunc함수는 (not) 연산자 showMe를 사용하여 변수를 현재와 반대 방향으로 설정합니다.!

$event 개체

$event함수를 호출할 때 객체를 인수로 전달할 수 있습니다 .

객체는 브라우저 의 $event이벤트 객체를 포함합니다:

예시

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

❮ 이전의 다음 ❯

지도 시간

예

참조

AngularJS 이벤트