Wie kann ich einen ng-Klick nach einem Klick innerhalb einer ng-if ng-switch-Anweisung deaktivieren?

Question

Ich habe eine Flag-Schaltfläche, die, wenn ein Benutzer anklickt, markiert die Diskussion, und danach die Flag-Schaltfläche wird durch den Text "erfolgreich gekennzeichnet" ersetzt. Momentan habe ich Probleme beim Deaktivieren von ng-click nach dem Klicken auf den Flag Button. ng-click existiert weiterhin für den Text 'erfolgreich markiert' und ich möchte Klicks auf diesen Text blockieren, um Fehler beim Markieren derselben Diskussion zu vermeiden.

html:

<div ng-if="canFlag(discussion)"> 
    <div ng-switch="isFlagging" 
     ng-disabled="button_clicked" 
     ng-click="do_something()" 
     id="flag{{discussion.id}}" 
     title="{{'flag as inappropriate'}}" 
     robo-confirm="{'Are you sure you want to flag this?'}" 
     class="feedActionBtn"> 

     <i ng-switch-when="false" 
      class="icon-flag"></i> 

     <div ng-switch-when="true" 
      translate translate-comment="success message"> 
      Successfully flagged</div> 
    </div> 
</div> 

js:

$scope.isFlagging = false; 
$scope.button_clicked = false; 
    $scope.do_something = function() { 
     $scope.button_clicked = true; 
     this.isFlagging = true; 
    } 

Durch eine lazy evaluation Hinzufügen oder durch Ausbreitung zu verhindern, könnte ich in der Lage sein, den do_something() Methode zum Block aus aufgerufen wird, aber ich Ich suche auch, dass der Mauszeiger ein Mauszeiger bleibt und nicht zu einem 'Klicklink' Maussymbol wechselt, wäre das möglich? Sieht aus wie die Maustaste Bild war ein CSS-Problem, das ich behoben

Ich habe auch versucht, nur die ng-klicken, um die ng-switch-when-Anweisung, wie die unten, aber nach dem Klick ist isFlagging immer noch falsch und ich habe nicht den Erfolg Text:

<div ng-switch-when="false" 
    ng-click="do_something()" 
    id="flag{{discussion.id}}" 
    title="{{'flag as inappropriate'}}" 
    robo-confirm="{'Are you sure you want to flag this?'}" 
    class="feedActionBtn"> 
    <i class="icon-flag"></i> 
</div> 

Answer 1

Sie können Ereignis stoppen, indem sprudelnde Zugabe ng-click="$event.stopPropagation()" auf „erfolgreich markiert“ div. In diesem Fall erreicht das Klickereignis den übergeordneten Container nicht:

Answer 2

Vielleicht eine einfache Bedingung?

``$scope.do_something = function() { 
    if ($scope.button_clicked === true) { 
    return; 
    } 
    else { 
    $scope.button_clicked = true; 
    this.isFlagging = true; 
    } 
}`` 

Answer 3

die button_clicked im ng-Klick hinzuzufügen ist ein gemeinsames Muster

<div ng-if="canFlag(discussion)"> 
 
    <div ng-click="!button_clicked && do_something()" 
 
    id="flag{{discussion.id}}" 
 
    title="{{'flag as inappropriate'}}" 
 
    robo-confirm="{'Are you sure you want to flag this?'}" 
 
    class="feedActionBtn"> 
 
    <div ng-switch="isFlagging"> 
 
     <i ng-switch-when="false" class="icon-flag"></i> 
 

 
     <div ng-switch-when="true" 
 
     translate translate-comment="success message"> 
 
     Successfully flagged</div> 
 
    </div> 
 
    </div> 
 
</div>