Angular ngClick verhindert Sprudeln mithilfe des Standardverhaltens
- 高洛峰Original
- 2016-12-08 09:40:011352Durchsuche
Das Beispiel in diesem Artikel beschreibt, wie Angular ngClick Blasenbildung verhindert und das Standardverhalten verwendet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist eigentlich eine sehr einfache Frage. Wenn Sie sich die offizielle API-Dokumentation von Angular genau angesehen haben, wollten Sie sie nicht aufzeichnen. Aber diese Frage wurde mehr als einmal gestellt, deshalb werde ich sie heute hier aufzeichnen.
In Angular wurde einigen ng-Ereignissen wie ngClick, ngBlur, ngCopy, ngCut, ngDblclick... eine Variable namens $event hinzugefügt.
NGClick wird beispielsweise im offiziellen Dokument beschrieben Dokument. von:
Ausdruck, der beim Klicken ausgewertet werden soll (Ereignisobjekt ist als $event verfügbar)
Angular-Code anzeigen 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});
});
});
};
}
};
}];
}
);
Im obigen Code können wir zwei Informationen erhalten:
① Von Angular unterstützte Ereignisse: click dblclick Mousedown MouseUp Mouseover Mousemove MouseEnter Mouseleave KeyDown KeyUp Keypress Submit Focus Blur Copy Ausschneiden Einfügen
② Wenn Angular die Ereignisfunktion ausführt, übergibt es eine Konstante namens $event, die das aktuelle Ereignisobjekt darstellt. Wenn Sie jQuery vor Angular eingeführt haben, ist dies das jQuery-Ereignis.
Damit wir die stopPropagation des Ereignisses verwenden können, um zu verhindern, dass das Ereignis sprudelt: der folgende Code: jsbin
HTML-Code:
<!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-Code:
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;
}]);
Sie können den Effekt in jsbin überprüfen.
Öffnen Sie zunächst Ihre Konsole und klicken Sie dann auf die Schaltfläche, ohne „Weitergabe stoppen“ auszuwählen. Im Gegenteil, nach der Auswahl werden nur die Protokollinformationen der Schaltfläche angezeigt.
Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich sein wird.