AngularJS ng- 클릭 중지

테이블 행에 클릭 이벤트가 있으며이 행에는 클릭 이벤트가있는 삭제 버튼도 있습니다. 삭제 버튼을 클릭하면 행의 클릭 이벤트도 시작됩니다.

여기 내 코드가 있습니다.

<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>

showUser표 셀에서 삭제 버튼을 클릭하면 이벤트가 발생 하지 않도록 하려면 어떻게해야합니까?

ngClick 지시문 (및 다른 모든 이벤트 지시문)은 $event동일한 범위에서 사용 가능한 변수를 만듭니다 . 이 변수는 JS event객체에 대한 참조 이며 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의 답변에 추가. 콜백이 전파 중지 여부를 결정할 때 $event객체를 콜백에 전달하는 것이 유용하다는 것을 알았습니다 .

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

그런 다음 콜백 자체에서 이벤트 전파를 중지해야하는지 여부를 결정할 수 있습니다.

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

클릭이 적용되는 영역을 제한 할 수있는 지시문을 작성했습니다. 이 시나리오는 이와 같은 특정 시나리오에 사용될 수 있으므로 사례별로 클릭을 처리하는 대신 "클릭이이 요소에서 나오지 않습니다"라고 말할 수 있습니다.

다음과 같이 사용하십시오.

<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>

이렇게하면 버튼뿐만 아니라 마지막 셀의 모든 클릭을 막을 수 있습니다. 그것이 원하는 것이 아니라면 다음과 같이 버튼을 감싸고 싶을 수도 있습니다.

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

지시문 코드는 다음과 같습니다.

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

나와 같은 지시문을 사용하는 경우 모델이나 컬렉션에서 속성을 업데이트 한 후 두 가지 데이터 바인딩 바인딩이 필요할 때 작동하는 방식입니다.

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')
        });
      });
    }
  }
}

이제 모든 버튼, 링크, div 등에서 쉽게 사용할 수 있습니다.

<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;
      }
   };