중첩 된 ng-click 호출 간의 이벤트 전파를 취소하는 가장 좋은 방법은 무엇입니까?

다음은 예입니다. 많은 사이트처럼 이미지 오버레이를 원한다고 가정 해 봅시다. 따라서 축소판을 클릭하면 전체 창 위에 검은 색 오버레이가 나타나고 더 큰 버전의 이미지가 가운데에 표시됩니다. 검은 색 오버레이를 클릭하면 사라집니다. 이미지를 클릭하면 다음 이미지를 보여주는 함수를 호출합니다.

HTML :

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

자바 스크립트 :

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // Some code to hdie the overlay
    }
    $scope.nextImage = function() {
        // Some code to find and display the next image
    }
}

이미지를 클릭, 두 경우 문제는,이 설정에 그입니다 nextImage()및 hideOverlay()이라고합니다. 그러나 내가 원하는 것은 단지 nextImage()부르는 것입니다.

다음과 nextImage()같이 함수 에서 이벤트를 캡처하고 취소 할 수 있다는 것을 알고 있습니다 .

if (window.event) {
    window.event.stopPropagation();
}

...하지만이 스 니펫으로 오버레이 내부 요소의 모든 함수 앞에 접두사를 추가하지 않아도되는 AngularJS 방법이 더 나은지 알고 싶습니다.

@JosephSilber가 말한 것 또는 $ event 객체를 ng-click콜백에 전달하고 그 내부의 전파를 중지하십시오.

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
  <img src="http://some_src" ng-click="nextImage($event)"/>
</div>

$scope.nextImage = function($event) {
  $event.stopPropagation();
  // Some code to find and display the next image
}

사용 $event.stopPropagation():

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage(); $event.stopPropagation()" />
</div>

데모는 다음과 같습니다. http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

나는 이것을 위해 지시문을 사용하는 아이디어를 좋아합니다.

.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

그런 다음 지시문을 사용하십시오.

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()" stop-event/>
</div>

원하는 경우 https://stackoverflow.com/a/14547223/347216 과 같은 다른 질문에 대한 답변과 같이이 솔루션을보다 일반적으로 만들 수 있습니다.

때로는 이렇게하는 것이 가장 합리적 일 수 있습니다.

<widget ng-click="myClickHandler(); $event.stopPropagation()"/>

나는 myClickHandler()다른 많은 곳에서 이벤트 전파를 멈추고 싶지 않기 때문에 이런 식으로 선택했다 .

물론, 핸들러 함수에 부울 매개 변수를 추가 할 수 있었지만 stopPropagation()just보다 훨씬 의미가 있습니다 true.

이것은 나를 위해 작동합니다 :

<a href="" ng-click="doSomething($event)">Action</a>

this.doSomething = function($event) {
  $event.stopPropagation();
  $event.preventDefault();
};

모든 링크에 전파 중지를 추가하지 않으려는 경우에도 작동합니다. 좀 더 확장 가능합니다.

$scope.hideOverlay( $event ){

   // only hide the overlay if we click on the actual div
   if( $event.target.className.indexOf('overlay') ) 
      // hide overlay logic

}

템플릿의 부모 요소에 ng-click = "$ event.stopPropagation"을 삽입하면 stopPropogation이 트리를 버블 링 할 때 포착되므로 전체 템플릿에 대해 한 번만 작성하면됩니다.

이벤트 전파 ng-click의 기본 동작을 수정 ng-click하고 중지하는 다른 지시문을 등록 할 수 있습니다 . 이런 식 $event.stopPropagation으로 손 으로 추가 할 필요가 없습니다 .

app.directive('ngClick', function() {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            return function(scope, element, attr) {
                element.on('click', function(event) {
                    event.stopPropagation();
                });
            };
        }
    }
});

<div ng-click="methodName(event)"></div>

IN 컨트롤러 사용

$scope.methodName = function(event) { 
    event.stopPropagation();
}