Tengo 2 divs, uno externo y otro interno que tienen ng-click adjunto a ambos. Cuando trato de hacer clic en el div interno, ambas funciones se ejecutan (supongo que porque esencialmente también estoy haciendo clic en el div externo porque contiene el interno). ¿Cómo puedo evitar que se ejecute la función del div externo al hacer clic en el div interno?
<div ng-click="vm.showMoreHandler()"> <div ng-click="vm.actionHandler($event, action)"></div> </div>
Puede usar event.stopPropagation() para evitar que burbujee
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.showMoreHandler = function(e) { console.log('showMoreHandler'); } $scope.actionHandler = function(e) { e.stopPropagation(); console.log('actionHandler'); } }]);
div { padding: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-click="showMoreHandler($event)">showMoreHandler <div ng-click="actionHandler($event)">actionHandler</div> </div> </div>