webentwicklung-frage-antwort-db.com.de

AngularJS - mehrere ng-click - Ereignis sprudelt

Im folgenden Beispiel:

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

Wenn ich auf die Schaltfläche showItem() klicke, wird aufgrund von Ereignissen auch ein Bubbling ausgelöst. Ich weiß, dass ich mit $event Nach $event.currentTarget Suchen und $event.stopPropagation() usw. ausführen kann, aber das ist sehr hässlich.

Btw. Ich möchte die Weitergabe auf dem button nicht stoppen (In meinem Fall ist der button ein Twitter bootstrapdopdown/button - dies ist nur ein Beispiel)

Wie verhindere ich, dass showItem() aufgerufen wird, wenn ich auf die Schaltfläche remove klicke?

EDIT Die hässliche Lösung wäre:

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
}
eventsjavascript-eventsangularjsangularjs-ng-repeatangularjs-ng-click
41
g00fy

Diese Lösung hat bei mir funktioniert (ich unterstütze nur neuere Browser, daher habe ich versucht, den Code so zu ändern, dass er Retro-kompatibler ist):

HTML:

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

Skripte:

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
}

[~ # ~] edit [~ # ~] - Eine JSFiddle-Demo zum Ausprobieren hinzugefügt http://jsfiddle.net/ 24e7mapp/1 /

64
Tibo

showItem kann aktualisiert werden, um vorzeitig zurückzukehren, wenn das übergebene item nicht mehr existiert:

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