Whenever a user clicks on the flag button, it flags the discussion and then the button changes to display 'successfully flagged'. I am currently facing an issue with disabling the ng-click after clicking the flag button. The ng-click still works for the text 'successfully flagged' and I want to prevent any clicks on this text to avoid errors when flagging the same discussion.
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;
}
By adding a lazy evaluation or by preventing propagation, I might be able to block the do_something() method from being called, but I am also looking to have the mouse cursor remain a pointer and not change to a 'click link' mouse icon, would this be possible? Looks like the mouse button image was a css issue i fixed
I've also tried just adding the ng-click to the ng-switch-when statement, such as the below, but after click, isFlagging is still false and I don't get the success 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>