각도 ngClick은 기본 동작을 사용하여 버블링을 방지합니다.
- 高洛峰원래의
- 2016-12-08 09:40:011400검색
이 문서의 예에서는 각도 ngClick이 버블링을 방지하고 기본 동작을 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
이것은 실제로 매우 간단한 질문입니다. Angular의 공식 API 문서를 주의 깊게 살펴보면 기록하고 싶지 않을 것입니다. 그런데 이 질문이 여러 번 물어보셨기 때문에 오늘은 여기에 기록하겠습니다.
Angular에서는 ngClick, ngBlur, ngCopy, ngCut, ngDblclick 등 일부 ng 이벤트에 $event라는 변수가 추가되었습니다...
예를 들어 ngClick은 공식 document.of:
클릭 시 평가할 표현식(이벤트 개체는 $event로 사용 가능)
Angular 코드 보기 ngEventDirs.js:
var ngEventDirectives = {};
forEach(
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
function(name) {
var directiveName = directiveNormalize('ng-' + name);
ngEventDirectives[directiveName] = ['$parse', function($parse) {
return {
compile: function($element, attr) {
var fn = $parse(attr[directiveName]);
return function(scope, element, attr) {
element.on(lowercase(name), function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
};
}
};
}];
}
);
위 코드에서 두 가지 정보를 얻을 수 있습니다:
1. Angular에서 지원하는 이벤트: click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus Blur copy 잘라내기 붙여넣기
② Angular가 이벤트 함수를 실행할 때 현재 이벤트 객체를 나타내는 $event라는 상수를 전달합니다. Angular 이전에 jQuery를 도입했다면 이것이 jQuery 이벤트입니다.
따라서 이벤트의 stopPropagation을 사용하여 이벤트 버블링을 방지할 수 있습니다. 다음 코드: jsbin
html 코드:
<!DOCTYPE html> <html id="ng-app" ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body ng-controller="demo as d"> <div ng-click="d.click('parent',$event)"> given some text for click <hr> <input type="checkbox" ng-model="d.stopPropagation" />Stop Propagation ? <hr> <button type="button" ng-click="d.click('button',$event)">button</button> </div> </body> </html>
js 코드:
angular.module("app",[])
.controller("demo",[function(){
var vm = this;
vm.click = function(name,$event){
console.log(name +" -----called");
if(vm.stopPropagation){
$event.stopPropagation();
}
};
return vm;
}]);
jsbin에서 효과를 확인할 수 있습니다.
먼저 콘솔을 열고 Stop Propagation을 선택하지 않고 버튼을 클릭하면 두 개의 로그 기록이 표시됩니다. 반대로 선택하면 버튼의 로그 정보만 나타납니다.
이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.