AngularJs ng-click stopPropagation


AngularJs ng-click stopPropagation : Sometimes we need to stopPropagation of ng-click event, It is very simple to stop propagation in AngularJs. Here in this tutorial we are going to explain how you can stop Propagation in AngularJs. You can also use our online editor to edit and run the code online.


AngularJs ng-click stopPropagation Example

You can use $event.stopPropagation() to stop propagation in AngularJs. Let us create an example of it-

AngularJs ng-click stopPropagation Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {

 $scope.result = '';
 $scope.testFunction= function() {
     $event.stopPropagation();
     $scope.result = "You clicked me";
 };
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
<input type="button" ng-click="testFunction($event)" value="Click Me"></br>
<p>Result = {{result}}</p>
       
 
</div> 
</div>
</body>  
</html>

Try it »

In the above example we have used $event object which is used to stopPropagation with $event.stopPropagation() so make sure to pass $event in ng-click function.

If you run the above example it will produce output something like this –

AngularJs ng-click stopPropagation Example

Advertisements

Add Comment

📖 Read More