I am facing an issue with a <div> that has a ng-click directive, but this <div> contains a child element also with a ng-click directive.
The problem arises when the click event on the child element also triggers the click event of the parent element.
Is there a way to prevent the parent click event from firing when the child is clicked?
Here is a jsfiddle link to better illustrate my situation.
Thank you in advance for any help provided.
EDIT
Below is the code snippet:
<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
<div id="child" ng-click="childClick()"></div>
<p ng-bind="elem"></p>
</div>
<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>
<script>
function TestController($scope) {
$scope.parentClick = function() {
$scope.elem = 'Parent';
}
var i = 1;
$scope.childClick = function() {
$scope.elem = 'Child';
$scope.childElem = 'Child event triggered x' + i;
i++;
}
}
</script>