angularjsHow can I use AngularJS to prevent default behavior?
AngularJS provides a few different ways to prevent default behavior.
- Using
ng-click
Directive:
ng-click
directive allows us to prevent default behavior of an element. We can use $event.preventDefault()
to prevent the default behavior.
For example:
<a href="www.example.com" ng-click="$event.preventDefault()">Link</a>
- Using
$event
Object:
We can also use $event
object to prevent default behavior of an element. We can use $event.preventDefault()
to prevent the default behavior.
For example:
<a href="www.example.com" ng-click="doSomething($event)">Link</a>
<script>
$scope.doSomething = function($event) {
$event.preventDefault();
}
</script>
- Using
$event.stopPropagation()
:
$event.stopPropagation()
can be used to prevent event bubbling.
For example:
<div ng-click="doSomething($event)">
<a href="www.example.com" ng-click="$event.stopPropagation()">Link</a>
</div>
<script>
$scope.doSomething = function($event) {
console.log('This will not be called');
}
</script>
Helpful links
More of Angularjs
- How can I use Angular to zoom in and out of a div?
- How can I become an Angular expert from a beginner level?
- How can I use Angular and Zorro together to create a software application?
- How do I install Yarn using Angular?
- How can I use Angular to zoom in on an image?
- How can I use AngularJS to create a zone in my software development project?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular with YAML?
- How do I use Angular to zip files?
See more codes...