AngularJS ng-click multiple calls

Question

I wrote the next code, but when I click on the trash icon, the ng-click of this element is thrown, but the ng-click of the div container is thrown too, I don't need the second one, just the first call, could some body help me.

  <div ng-if="order.selectedProducts === null || order.selectedProducts.length > 0"
    class="cartCol hoverable" ng-repeat="product in order.selectedProducts track by $index"
    ng-click="showProductDetailed(product)">
    <div class="cartHeading" ng-bind="product.name"></div>
    <a href="" class="trashIcon" ng-click="removeSelectedProduct(product);">
      <i class="fa fa-trash"></i>
    </a>
    <div class="cartSizeInfo">
      <span class="fltLft">{{product.productTypeName}}</span>
      <span class="fltRht">Bs. {{product.price}}</span>
    </div>
  </div>

check this https://stackoverflow.com/questions/32330112/how-to-prevent-ng-clicks-triggering-twice-on-label-tag — Hussein Salman, Nov 01 '17 at 19:50
solved, I had to put $event.stopPropagation(); after the first call. — MiltonCh, Nov 01 '17 at 20:00
@MiltonCh Why don't you put it as an answer. It will help future readers. — Pritam Banerjee, Nov 01 '17 at 20:13

score 1 · Answer 1 · answered Jan 07 '18 at 03:46

1

I had to put $event.stopPropagation(); after the first call.

answered Jan 07 '18 at 03:46

MiltonCh

11
2

sometimes it may create another issue - say tooltip is not closed after clicking trash icon since listener is attached to – skyboyer Jan 07 '18 at 05:46

AngularJS ng-click multiple calls

1 Answers1