events - AngularJS-एकाधिक एनजी-क्लिक-घटना बुलबुले




javascript-events angularjs-ng-repeat (2)

निम्नलिखित उदाहरण में:

  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>

जब मैं बटन showItem() पर क्लिक करता हूं तो showItem() कारण भी इसे बुलाया जाता है। मुझे पता है कि मैं $event.currentTarget लिए $event देखने के लिए उपयोग कर सकता $event.currentTarget और $event.stopPropagation() इत्यादि कर सकता $event.stopPropagation() लेकिन यह बहुत बदसूरत है।

Btw। मैं button पर प्रचार रोकना नहीं चाहता (मेरे मामले में button एक twitter bootstrap dopdown/button - यह सिर्फ एक उदाहरण है)

जब मैं remove बटन पर क्लिक करता हूं तो मैं showItem() से showItem() को कैसे showItem() ?

संपादित करें बदसूरत फिक्स होगा:

function remove(item,$event){
  $event.originalEvent.prevent = true;
  // rest of the code
}

function showItem(item,$event){
  if($event.originalEvent.prevent)return;
  // rest of the code
}

यह समाधान मेरे लिए काम करता है (मैं केवल हाल ही के ब्राउज़र का समर्थन कर रहा हूं, इसलिए मैंने कोड को अधिक रेट्रो-संगत होने के लिए संशोधित करने का प्रयास किया):

HTML:

<li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item, $event)">Remove</button>
</li>

स्क्रिप्ट:

function remove(item, $event) {
    // do some code here

    // Prevent bubbling to showItem.
    // On recent browsers, only $event.stopPropagation() is needed
    if ($event.stopPropagation) $event.stopPropagation();
    if ($event.preventDefault) $event.preventDefault();
    $event.cancelBubble = true;
    $event.returnValue = false;
}
function showItem(item) {
    // code here
}

संपादित करें - इसे देखने के लिए एक JSFiddle डेमो जोड़ा गया http://jsfiddle.net/24e7mapp/1/


showItem को वापस लौटने के लिए अपडेट किया जा सकता है यदि पास की गई item अब मौजूद नहीं है:

function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}




angularjs-ng-click