[angularjs] 중첩 된 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 방법이 더 나은지 알고 싶습니다.

답변

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

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

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

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

<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

}