Two nested click events with angularjs
angularjs, function, javascript
Solution
All you need to do is to stop event propagation/bubbling.
This code will help you:
<div ng-click="test()">ZZZZZ
<div id="myId" ng-click="test2();$event.stopPropagation()">XXXXX</div>
<div>YYYYYY</div>
...
</div>
If your `test` and `test2` functions would look as follows, you would get only `test2` in your console when clicking on `myId` DIV. Without `$event.stopPropagation()` you would get `test2` followed by `test` in the console output window.
$scope.test = function() {
console.info('test');
}
$scope.test2 = function() {
console.info('test2');
}
Problem
I have a HTML structure like this: ``` <div ng-click="test()"> <div id="myId" ng-click="test2()"></div> <div></div> ... </div> ``` Currently when I click on the `div` with the id `myId` then both functions get triggered, but I want that just `test2` function get triggered. How can I do that?