เป็นวิธีที่ดีที่สุดในการยกเลิกการเผยแพร่กิจกรรมระหว่างการโทร 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 object ไปที่ng-clickcallback และหยุดการแพร่กระจายของมัน:

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

ใช้ตัวควบคุม

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