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와 기능을 실행할 수있게 해준다.
하는 HTML 이벤트를 덮어 쓰지 것 AngularJS와 이벤트가 모두 이벤트가 실행됩니다.
마우스 이벤트
커서가이 순서대로 요소를 통해 이동할 때 마우스 이벤트가 발생합니다
- NG-mouseenter
- NG-마우스 오버
- NG-MouseMove 이벤트
- NG-하는 MouseLeave
또는 마우스 버튼이 순서대로 요소를 클릭 할 때 :
- NG-에서 MouseDown
- NG-에서 mouseUp
- NG 클릭
당신은 어떤 HTML 요소에 마우스 이벤트를 추가 할 수 있습니다.
예
카운트 변수를 증가 할 때 H1 요소 위로 마우스를 이동 :
<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 클릭 지침
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 코드의 섹션을 표시하고 버튼은 드롭 다운 메뉴처럼 다시 클릭 할 때 숨기려면 :
메뉴:
피자
파스타
Pesce
예
<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 기능은 설정 showMe 의 사용에 의해 그것이 무엇의 반대에 변수를 ! (안) 연산자를.
$ 이벤트 객체
당신은 통과 할 수 $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>
»그것을 자신을 시도