Как отключить ng-click после щелчка внутри оператора ng-if ng-switch?

Question

У меня есть кнопка флага, которая, когда пользователь нажимает, флага обсуждает, а затем кнопка флага заменяется текстом «успешно помечен». В настоящее время у меня возникает проблема с отключением ng-click после нажатия кнопки флага. ng-click по-прежнему существует для текста «успешно помечен», и я хочу заблокировать клики по этому тексту, чтобы предотвратить ошибки при пометке того же обсуждения.

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

путем добавления ленивые вычисления или путем предотвращения распространения, я мог бы быть в состоянии блокировать do_something() метод от вызова, но я Я также хочу, чтобы курсор мыши оставался указателем и не менялся на значок мыши «click link», возможно ли это? Похоже, что изображение кнопки мыши было проблемой css i fixed

Я также попытался просто добавить ng-click в оператор ng-switch-when, например, ниже, но после щелчка isFlagging все еще является ложным и я не получаю текст успеха:

<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

Вы можете остановить событие пузырится, добавив ng-click="$event.stopPropagation()" на «Успешно» помеченные делах. В этом случае событие click не достигнет родительского контейнера:

<div ng-click="$event.stopPropagation()" 
    ng-switch-when="true" 
    translate translate-comment="success message"> 
    Successfully flagged</div> 

Answer 2

Возможно, простой условный?

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

Answer 3

Добавление button_clicked в нг-мыши является общей картины

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