AngularJS - Button click contained in grid with ng-click event

Question

.html

<div class="col col-50"
    ng-repeat="col in row"
    ng-click="openProductDetails(col.prod_id);">
    <button 
        ng-click="addToCart(col.prod_id);">
        Add to cart
    </button>
</div>

As you can see I have a grid or <div> here which as openProductDetails() on click event. And inside the grid, I have a button which has an addToCart(). The problem is when I click the button, the openProductDetails() is also triggered. I cannot find a way to prevent the click event of the parent element when the button is clicked.

Thanks in advance.

Answer 1

You can use Use event.stopPropation() .This variable is a reference to JS event object and can be used to call stopPropagation()

 <div class="col col-50"
        ng-repeat="col in row"
        ng-click="openProductDetails(col.prod_id);">
        <button 
            ng-click="addToCart(col.prod_id); $event.stopPropagation();">
            Add to cart
        </button>
    </div>