Açısal JS ng-click durdurma

Bir tablo satırında bir tıklama olay var ve bu satırda da bir tıklama olayı ile bir silme düğmesi vardır. Sil düğmesine tıkladığımda, satırdaki Olay'a da tıklanır.

İşte kodum.

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

showUserTablo hücresindeki sil Düğmesini tıklattığımda Olayın tetiklenmesini nasıl önleyebilirim ?

ngClick yönergesi (diğer tüm olay yönergelerinin yanı sıra) $eventaynı kapsamda kullanılabilen değişken oluşturur . Bu değişken JS eventnesnesine bir referanstır ve çağrı yapmak için kullanılabilir stopPropagation():

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

Stewie'nin cevabına ek olarak. Geri aramanızın yayılmanın durdurulup durdurulmayacağına karar vermesi durumunda, $eventnesneyi geri aramaya geçirmeyi yararlı buldum :

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

Ve sonra geri aramanın kendisinde, olayın yayılmasının durdurulması gerekip gerekmediğine karar verebilirsiniz:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

Bir tıklamanın etkili olduğu alanları sınırlamanızı sağlayan bir yönerge yazdım. Bunun gibi belirli senaryolar için kullanılabilir, bu nedenle duruma göre tıklamayla uğraşmak yerine "tıklamalar bu öğeden çıkmayacak" diyebilirsiniz.

Bunu şöyle kullanırsınız:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

Bunun yalnızca düğme için değil, son hücredeki tüm tıklamaları önleyeceğini unutmayın. İstediğiniz bu değilse düğmeyi şu şekilde sarmak isteyebilirsiniz:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

Direktifin kodu şöyledir:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

Benim gibi bir yönerge kullanmanız durumunda, örneğin herhangi bir model veya koleksiyondaki bir özniteliği güncelledikten sonra iki veri yolu bağlayıcısına ihtiyacınız olduğunda bu şekilde çalışır:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

Şimdi, herhangi bir düğme, bağlantı, div vb.

<button set-survey-in-edition-mode >Edit survey</button>

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };